Home > Article > Web Front-end > AngularJS schedule implementation

AngularJS schedule implementation

php中世界最好的语言Original: 2018-04-19 10:10:501205browse

This time I will bring you the AngularJS implementation schedule. What are the precautions for the AngularJS implementation schedule. The following is a practical case, let’s take a look.

Function: Add event/Complete event/Delete event

<!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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

AngularJS schedule implementation

Related articles