功能:添加事件/完成事件/刪除事件 ...
功能:添加事件/完成事件/刪除事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .note{ 12 margin:0 auto; 13 background: orange; 14 color: orange; 15 width: 400px; 16 padding:2px 2px; 17 } 18 .input{ 19 text-align: center; 20 } 21 h1{ 22 text-align: center; 23 color:#fff; 24 padding:10px 10px; 25 } 26 h5{ 27 color: #fff; 28 text-align: left; 29 padding-left: 10px; 30 } 31 textarea{ 32 width: 300px; 33 height: 58px; 34 resize: none; 35 border:1px solid orange; 36 } 37 button{ 38 width: 80px; 39 height: 58px; 40 outline: none; 41 background: orange; 42 font-size: 24px; 43 border:3px solid #fff; 44 position: relative; 45 top:-22px; 46 color: #fff; 47 } 48 ul li{ 49 margin:0 auto; 50 width: 380px; 51 background: #fff; 52 list-style: none; 53 line-height:18px; 54 padding:2px; 55 margin-bottom:2px; 56 } 57 .delbtn{ 58 background: skyblue; 59 border:none; 60 float: right; 61 line-height:14px; 62 color: #fff; 63 padding:2px 6px; 64 } 65 .done label{ 66 text-decoration:line-through ; 67 } 68 </style> 69 </head> 70 <body ng-app="demo"> 71 <div class="note" ng-controller='democontroller'> 72 <h1>NOTE</h1> 73 <div class="input"> 74 <textarea name="" id="" cols="30" rows="10" ng-model="text"></textarea><button ng-click="add()">提交</button> 75 </div> 76 <div class="todo"> 77 <h5>未完成:{{todos.length}}</h5> 78 <ul> 79 <li ng-repeat="todo in todos"> 80 <form> 81 <input type="radio" id="redio" ng-checked="{{todo.checked}}" ng-click="doit($index)"> 82 <label for="redio">{{todo.text}}</label> 83 <input type="button" value="刪除" class="delbtn" ng-click="del($index,todos)"> 84 </form> 85 </li> 86 </ul> 87 </div> 88 <div class="done"> 89 <h5>已完成:{{dones.length}}</h5> 90 <ul> 91 <li ng-repeat="done in dones"> 92 <form> 93 <input type="radio" id="redio" ng-checked="{{done.checked}}" ng-click="notdoit($index)"> 94 <label for="redio">{{done.text}}</label> 95 <input type="button" value="刪除" class="delbtn" ng-click="del($index,dones)"> 96 </form> 97 </li> 98 </ul> 99 </div> 100 </div> 101 <script src="angular.min.js"></script> 102 <script> 103 var demo=angular.module('demo',[]); 104 demo.controller('democontroller',function($scope){ 105 $scope.todos=[]; 106 $scope.dones=[]; 107 $scope.add=function(){ 108 $scope.todos.push({ 109 checked:false, 110 text:$scope.text 111 }); 112 $scope.text='';//清空文本框 113 console.log($scope.todos.length); 114 } 115 $scope.doit=function(index){ 116 var str=$scope.todos.splice(index,1)[0]; 117 str.checked=true; 118 $scope.dones.push(str); 119 } 120 $scope.notdoit=function(index){ 121 var str=$scope.dones.splice(index,1)[0]; 122 str.checked=false; 123 $scope.todos.push(str); 124 } 125 $scope.del=function(index,arr){ 126 arr.splice(index,1); 127 } 128 }); 129 </script> 130 </body> 131 </html>
