Implementierung des AngularJS-Zeitplans-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Implementierung des AngularJS-Zeitplans

Apr 19, 2018 am 10:10 AM

angularjs javascript 日程表

Dieses Mal bringe ich Ihnen den AngularJS-Implementierungsplan. Was sind die Vorsichtsmaßnahmen für den AngularJS-Implementierungsplan? Hier sind praktische Fälle.

Funktion: Ereignis hinzufügen/Ereignis vervollständigen/Ereignis löschen

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;Document&lt;/title&gt;
  &lt;style&gt;
    *{
      margin: 0;
      padding: 0;
    }
    .note{
      margin:0 auto;
      background: orange;
      color: orange;
      width: 400px;
      padding:2px 2px;
    }
    .input{
      text-align: center;
    }
    h1{
      text-align: center;
      color:#fff;
      padding:10px 10px;
    }
    h5{
      color:#fff;
      text-align: left;
      padding-left: 10px;
    }
    textarea{
      width: 300px;
      height: 58px;
      resize: none;
      border:1px solid orange;
    }
    button{
      width: 80px;
      height: 58px;
      outline: none;
      background: orange;
      font-size: 24px;
      border:3px solid#fff;
      position: relative;
      top:-22px;
      color:#fff;
    }
    ul li{
      margin:0 auto;
      width: 380px;
      background:#fff;
      list-style: none;
      line-height:18px;
      padding:2px;
      margin-bottom:2px;
    }
    .delbtn{
      background: skyblue;
      border:none;
      float: right;
      line-height:14px;
      color:#fff;
      padding:2px 6px;
    }
    .done label{
      text-decoration:line-through ;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body ng-app=&quot;demo&quot;&gt;
  &lt;p class=&quot;note&quot;ng-controller=&#39;democontroller&#39;&gt;
    &lt;h1&gt;NOTE&lt;/h1&gt;
    &lt;p class=&quot;input&quot;&gt;
      &lt;textarea name=&quot;&quot;id=&quot;&quot;cols=&quot;30&quot;rows=&quot;10&quot;ng-model=&quot;text&quot;&gt;&lt;/textarea&gt;&lt;button ng-click=&quot;add()&quot;&gt;提交&lt;/button&gt;
    &lt;/p&gt;
    &lt;p class=&quot;todo&quot;&gt;
      &lt;h5&gt;未完成:{{todos.length}}&lt;/h5&gt;
      &lt;ul&gt;
        &lt;li ng-repeat=&quot;todo in todos&quot;&gt;
          &lt;form&gt;
            &lt;input type=&quot;radio&quot;id=&quot;redio&quot;ng-checked=&quot;{{todo.checked}}&quot;ng-click=&quot;doit($index)&quot;&gt;
            &lt;labelfor=&quot;redio&quot;&gt;{{todo.text}}&lt;/label&gt;
            &lt;input type=&quot;button&quot;value=&quot;删除&quot;class=&quot;delbtn&quot;ng-click=&quot;del($index,todos)&quot;&gt;
          &lt;/form&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/p&gt;
    &lt;p class=&quot;done&quot;&gt;
      &lt;h5&gt;已完成:{{dones.length}}&lt;/h5&gt;
      &lt;ul&gt;
        &lt;li ng-repeat=&quot;done in dones&quot;&gt;
          &lt;form&gt;
            &lt;input type=&quot;radio&quot;id=&quot;redio&quot;ng-checked=&quot;{{done.checked}}&quot;ng-click=&quot;notdoit($index)&quot;&gt;
            &lt;labelfor=&quot;redio&quot;&gt;{{done.text}}&lt;/label&gt;
            &lt;input type=&quot;button&quot;value=&quot;删除&quot;class=&quot;delbtn&quot;ng-click=&quot;del($index,dones)&quot;&gt;
          &lt;/form&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/p&gt;
  &lt;/p&gt;
  &lt;script src=&quot;angular.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
    vardemo=angular.module('demo',[]);
    demo.controller('democontroller',function($scope){
      $scope.todos=[];
      $scope.dones=[];
      $scope.add=function(){
        $scope.todos.push({
          checked:false,
          text:$scope.text
        });
        $scope.text='';//清空文本框
        console.log($scope.todos.length);
      }
      $scope.doit=function(index){
        varstr=$scope.todos.splice(index,1)[0];
        str.checked=true;
        $scope.dones.push(str);
      }
      $scope.notdoit=function(index){
        varstr=$scope.dones.splice(index,1)[0];
        str.checked=false;
        $scope.todos.push(str);
      }
      $scope.del=function(index,arr){
        arr.splice(index,1);
      }
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

vue implementiert die Click-on-Image-Zoomfunktion (mit Code)

Echtzeit Erfassung des Inhalts von Eingabefeldern

Detaillierte Erläuterung der Verschachtelung von einfachen und doppelten Anführungszeichen in JS

Das obige ist der detaillierte Inhalt vonImplementierung des AngularJS-Zeitplans. 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