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

Implementierung des AngularJS-Zeitplans

php中世界最好的语言

Freigeben： 2018-04-19 10:10:50

Original

1212 Leute haben es durchsucht

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      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 ;
    }
  </style>
</head>
<body ng-app="demo">
  <p class="note"ng-controller=&#39;democontroller&#39;>
    <h1>NOTE</h1>
    <p class="input">
      <textarea name=""id=""cols="30"rows="10"ng-model="text"></textarea><button ng-click="add()">提交</button>
    </p>
    <p class="todo">
      <h5>未完成:{{todos.length}}</h5>
      <ul>
        <li ng-repeat="todo in todos">
          <form>
            <input type="radio"id="redio"ng-checked="{{todo.checked}}"ng-click="doit($index)">
            <labelfor="redio">{{todo.text}}</label>
            <input type="button"value="删除"class="delbtn"ng-click="del($index,todos)">
          </form>
        </li>
      </ul>
    </p>
    <p class="done">
      <h5>已完成:{{dones.length}}</h5>
      <ul>
        <li ng-repeat="done in dones">
          <form>
            <input type="radio"id="redio"ng-checked="{{done.checked}}"ng-click="notdoit($index)">
            <labelfor="redio">{{done.text}}</label>
            <input type="button"value="删除"class="delbtn"ng-click="del($index,dones)">
          </form>
        </li>
      </ul>
    </p>
  </p>
  <script src="angular.min.js"></script>
  <script>
    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);
      }
    });
  </script>
</body>
</html>

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!