首頁 > 開發者 > JavaScript
AngularJS小案例:議程表，angularjs議程表
功能:添加事件/完成事件/刪除事件
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.text111 });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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
