Heim Web-Frontend js-Tutorial So implementieren Sie die Zeitplanfunktion in Angular

So implementieren Sie die Zeitplanfunktion in Angular

Jun 15, 2018 am 11:20 AM
angular 内容 日程表 显示 添加 隐藏

In diesem Artikel wird hauptsächlich die von Angular implementierte Zeitplanfunktion mit der Funktion zum Hinzufügen von Inhalten zum Zeitplan und zum Ausblenden des angezeigten Inhalts vorgestellt. Dabei handelt es sich um Implementierungstechniken im Zusammenhang mit der AngularJS-Ereignisreaktion und dem dynamischen Betrieb von Seitenelementen zum Folgenden

Das Beispiel in diesem Artikel beschreibt die von Angular implementierte Zeitplanfunktion. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie folgt folgt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net Angular日程表</title>
  <style>
    table{
      border-collapse: collapse;
    }
    td{
      padding: 10px;
      border: 1px solid #000;
    }
  </style>
  <script src="angular.min.js"></script>
  <script>
    /*
     1、基本布局
     2、准备模拟数据
     */
    // 模拟数据
    var data = {
      user:"吴四",
      items:[
        {action:"约刘诗诗吃饭",done:false},
        {action:"约刘诗诗跳舞",done:false},
        {action:"约刘诗诗敲代码",done:true},
        {action:"约刘诗诗爬长城",done:false},
        {action:"约刘诗诗逛天坛",done:false},
        {action:"约刘诗诗看电影",done:false}
      ]
    };
    var myapp=angular.module("myapp",[]);
    /*这里的是自定义过滤器,将数组items 过滤之后返回arr*/
    myapp.filter("doFilter",function(){
      /*传入两个参数,一个数组items,另一个是complate*/
      return function(items,flag){
        var arr=[];
        /*遍历items,如果dones是false或者下边的按钮在选中状态,就将这一条item push到arr中*/
        for(var i=0;i<items.length;i++){
          if(items[i].done==false){
            arr.push(items[i]);
          }else{
            if(flag==true){
              arr.push(items[i]);
            }
          }
        }
        return arr;
      }
    });
    myapp.controller("myCtrl",function($scope){
      $scope.data=data;
      $scope.complate=false;
      /*判断还有几件事儿没有完成*/
      $scope.count=function(){
        var n=0;
        /*判断还有几件事儿没有完成*/
        for(var i=0;i<$scope.data.items.length;i++){
          if($scope.data.items[i].done==false){
            n++;
          }
        }
        return n;
      };
      /*添加新的日程*/
      $scope.add=function(){
        /*对$scope.action进行一下非空判断*/
        if($scope.action){
          /*如果输入了内容之后,就在数组的最后加入一条新内容*/
          $scope.data.items.push({"action":$scope.action,"done":false});
          /*添加完成之后,将input置空*/
          $scope.action="";
        }
      };
    });
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h2>吴四的日程<span ng-bind="count()"></span></h2>
<p>
  <input type="text" ng-model="action"><button ng-click="add()">添加</button>
</p>
<table>
  <thead>
  <tr>
    <th>序号</th>
    <th>日程</th>
    <th>完成情况</th>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="item in data.items|doFilter:complate">
    <td>{{$index}}</td>
    <td>{{item.action}}</td>
    <td><input type="checkbox" ng-model="item.done"></td>
  </tr>
  </tbody>
</table>
<p>显示全部<input type="checkbox" ng-model="complate"></p>
</body>
</html>
Nach dem Login kopieren

oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So erhalten Sie den aktuellen Zeitunterschied mit JS

So steuern Sie die Maus, um das Klicken auf die Schaltfläche zu verhindern in JS

So implementieren Sie eine schwebende Kollision in JS

Informationen zur Verwendung von bootstrap-table.js zum Implementieren der erweiterten Paging-Symbolleistenfunktion

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Zeitplanfunktion in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So fügen Sie einen Fernseher zu Mijia hinzu So fügen Sie einen Fernseher zu Mijia hinzu Mar 25, 2024 pm 05:00 PM

Viele Benutzer bevorzugen im modernen Leben zunehmend das elektronische Ökosystem der Xiaomi-Smart-Home-Vernetzung. Nach der Verbindung mit der Mijia-APP können Sie die angeschlossenen Geräte problemlos mit Ihrem Mobiltelefon steuern. Viele Benutzer wissen jedoch immer noch nicht, wie sie Xiaomi hinzufügen können Wenn Sie die App zu Hause verwenden, erfahren Sie in diesem Tutorial die spezifischen Verbindungsmethoden und -schritte, in der Hoffnung, allen Bedürftigen zu helfen. 1. Nachdem Sie die Xiaomi-App heruntergeladen haben, erstellen Sie ein Xiaomi-Konto oder melden Sie sich an. 2. Methode zum Hinzufügen: Nachdem das neue Gerät eingeschaltet ist, bringen Sie das Telefon in die Nähe des Geräts und schalten Sie den Xiaomi-Fernseher ein. Unter normalen Umständen wird eine Verbindungsaufforderung angezeigt. Wählen Sie „OK“, um den Geräteverbindungsvorgang zu starten. Wenn keine Aufforderung erscheint, können Sie das Gerät auch manuell hinzufügen. Die Methode ist: Klicken Sie nach dem Aufrufen der Smart Home-App auf die 1. Schaltfläche unten links

So ändern Sie den Microsoft Edge-Browser so, dass er mit 360-Navigation geöffnet wird - So ändern Sie die Öffnung mit 360-Navigation So ändern Sie den Microsoft Edge-Browser so, dass er mit 360-Navigation geöffnet wird - So ändern Sie die Öffnung mit 360-Navigation Mar 04, 2024 pm 01:50 PM

Wie ändere ich die Seite, die den Microsoft Edge-Browser öffnet, auf 360-Navigation? Es ist eigentlich sehr einfach, deshalb werde ich Ihnen jetzt die Methode vorstellen, die Seite zu ändern, die den Microsoft Edge-Browser auf 360-Navigation öffnet Schau mal. Ich hoffe, ich kann allen helfen. Öffnen Sie den Microsoft Edge-Browser. Wir sehen eine Seite wie die folgende. Klicken Sie auf das Dreipunktsymbol in der oberen rechten Ecke. Klicken Sie auf „Einstellungen“. Klicken Sie in der linken Spalte der Einstellungsseite auf „Beim Start“. Klicken Sie auf die drei im Bild in der rechten Spalte angezeigten Punkte (klicken Sie nicht auf „Neuen Tab öffnen“), klicken Sie dann auf Bearbeiten und ändern Sie die URL in „0“ (oder andere bedeutungslose Zahlen). Klicken Sie anschließend auf „Speichern“. Wählen Sie als Nächstes „

So installieren Sie Angular unter Ubuntu 24.04 So installieren Sie Angular unter Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js ist eine frei zugängliche JavaScript-Plattform zum Erstellen dynamischer Anwendungen. Es ermöglicht Ihnen, verschiedene Aspekte Ihrer Anwendung schnell und klar auszudrücken, indem Sie die Syntax von HTML als Vorlagensprache erweitern. Angular.js bietet eine Reihe von Tools, die Sie beim Schreiben, Aktualisieren und Testen Ihres Codes unterstützen. Darüber hinaus bietet es viele Funktionen wie Routing und Formularverwaltung. In dieser Anleitung wird erläutert, wie Angular auf Ubuntu24 installiert wird. Zuerst müssen Sie Node.js installieren. Node.js ist eine JavaScript-Ausführungsumgebung, die auf der ChromeV8-Engine basiert und es Ihnen ermöglicht, JavaScript-Code auf der Serverseite auszuführen. In Ub sein

Wie kann man WeChat-Freunde verstecken, ohne sie zu blockieren oder zu löschen? So verbergen Sie WeChat-Freunde, ohne sie zu blockieren oder zu löschen Wie kann man WeChat-Freunde verstecken, ohne sie zu blockieren oder zu löschen? So verbergen Sie WeChat-Freunde, ohne sie zu blockieren oder zu löschen Mar 13, 2024 pm 07:19 PM

Wie kann man WeChat-Freunde verstecken, ohne sie zu blockieren oder zu löschen? Viele Benutzer möchten einige Freunde ausblenden, wissen aber nicht, wie das geht. Auf dieser Website wird den Benutzern sorgfältig erklärt, wie sie WeChat-Freunde ausblenden können, ohne sie zu blockieren oder zu löschen. Methoden zum Ausblenden von WeChat-Freunden ohne Blockieren oder Löschen Methode 1: 1. Öffnen Sie zunächst die WeChat-Software, suchen Sie das Adressbuch auf der WeChat-Seite und klicken Sie auf „Mein“. 2. Dann betreten wir die Einstellungsseite. 3. Suchen Sie die Option „Datenschutz“ und klicken Sie darauf. 4. Klicken Sie dann auf „Nicht sehen lassen“. 5. Gehen Sie zur Seite „Do Not Let Her View“ und klicken Sie auf „+“, um die Freunde zu markieren, die Sie ausblenden möchten.

So verbergen Sie Werke in Douyin-Kurzvideos. So verbergen Sie persönliche Videowerke So verbergen Sie Werke in Douyin-Kurzvideos. So verbergen Sie persönliche Videowerke Mar 12, 2024 pm 12:49 PM

In der Douyin-Kurzvideo-App-Software stehen viele kurze Videoarbeiten zur Verfügung. Sie können sie nach Belieben ansehen und sie sind alle dauerhaft kostenlos verfügbar Bieten Sie jedem die zufriedenstellendste Art zuzusehen. Geben Sie Ihr Konto ein, um sich online anzumelden, und es werden verschiedene aufregende Kurzvideos gesendet, die genau auf dem basieren, was jeder jeden Tag sieht. Sie können auch den Live-Übertragungsraum betreten, um mit dem Moderator zu interagieren und zu chatten, damit Sie sich wohl fühlen mehr glücklich. Die von Einzelpersonen hochgeladenen Werke können auch ganz einfach mit einem Klick eingerichtet werden. Wischen Sie nach oben und unten, um die Echtzeit-Kommentare unzähliger Internetnutzer anzuzeigen Jetzt hat der Herausgeber detaillierte Online-Douyin-Kurzvideos veröffentlicht. Benutzer drängen auf Möglichkeiten, persönliche Videoarbeiten zu verbergen. Öffnen Sie zunächst das kurze Douyin-Video

Mar 18, 2024 pm 03:40 PM

Neben der erstaunlichen Hardware-Ausstattung und den hervorragenden Funktionen verbirgt das Xiaomi Mi 14 auch einen faszinierenden Ort – Smart Island. Hier können Benutzer personalisierte Anpassungen und ein unbegrenztes kreatives Mobiltelefonerlebnis genießen. Aber nicht jedem gefällt diese Funktion. Wie versteckt das Xiaomi Mi 14 Smart Island? Finden wir es gemeinsam heraus. Wie verstecke ich Smart Island auf dem Xiaomi Mi 14? 1. Öffnen Sie die Einstellungsanwendung des Xiaomi 14-Mobiltelefons. 2. Scrollen Sie, um die Option „Funktionen“ zu finden, und klicken Sie zur Eingabe. 3. Suchen Sie auf der Funktionsseite die Option „Smart Island ausblenden“ und aktivieren Sie sie. 4. Nachdem Sie bestätigt haben, dass das Ausblenden des Smart Island aktiviert ist, kehren Sie zum Desktop zurück und Sie werden sehen, dass das Smart Island ausgeblendet wurde.

Ausführliches Tutorial zum Verstecken von Werken auf Douyin Ausführliches Tutorial zum Verstecken von Werken auf Douyin Mar 25, 2024 pm 03:11 PM

1. Klicken Sie zunächst auf [+], um zu schießen. 2. Klicken Sie dann auf das Häkchen in der unteren rechten Ecke, um den Abschluss der Aufnahme zu bestätigen. Klicken Sie auf] Weiter[, 3. Klicken Sie auf [Wer kann sehen]. Wählen Sie einfach [Privat] aus. Szenario 2: Die Arbeit wurde übernommen. 1. Klicken Sie auf [Ich] und wählen Sie [Arbeit]. 2. Klicken Sie rechts auf das [drei Punkte]-Logo. 3. Wischen Sie nach links, um [Berechtigungseinstellungen] zu finden. 4. Klicken Sie auf [Als privat festlegen].

So bereinigen Sie den versteckten Müll auf Ihrem Telefon gründlich (entfernen Sie den Müll vollständig aus dem Speicher Ihres Telefons) So bereinigen Sie den versteckten Müll auf Ihrem Telefon gründlich (entfernen Sie den Müll vollständig aus dem Speicher Ihres Telefons) Jun 01, 2024 am 09:29 AM

Mobiltelefone sind durch die kontinuierliche Weiterentwicklung der Technologie und die Beliebtheit von Smartphones zu einem unverzichtbaren Bestandteil unseres täglichen Lebens geworden. Diese Junk-Dateien nehmen wertvollen Speicherplatz in Anspruch, und im Laufe der Zeit sammelt sich eine große Menge versteckter Junk-Dateien auf dem Telefon an, was jedoch zu einer Verschlechterung der Leistung des Telefons führt. Zu wissen, wie man versteckten Müll auf seinem Telefon gründlich bereinigt, ist für jeden Mobiltelefonbenutzer zu einem unverzichtbaren Wissen geworden. 1. Unnötige Anwendungs-Caches finden und löschen. 2. Anwendungen löschen, die nicht mehr verwendet werden. 3. Foto- und Video-Cache bereinigen. 4. Temporäre Dateien und Download-Ordner vollständig bereinigen. 5. Kontakt- und SMS-Datensätze organisieren und bereinigen. 6. System-Cache bereinigen. 7. Deinstallieren Sie nutzlose Systemanwendungen. 8. Bereinigen Sie den Browser-Cache und -Verlauf. 9. Löschen Sie ungültige Musik- und Audiodateien. 10. Optimieren Sie das Dateisystem Ihres Mobiltelefons

See all articles