<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="ajs/angular.min.js"></script> <script> var data = { user:"吴四", items:[ {action:"吃饭",done:false}, {action:"跳舞",done:false}, {action:"敲代码",done:true}, {action:"爬长城",done:false}, {action:"逛天坛",done:false}, {action:"看电影",done:false} ] }; var app=angular.module("mpp",[]); app.filter("doFilter",function(){ /*传入两个参数,一个数组items,另一个是complate*/ return function(items,flag){ var arr=[]; /*遍历items,如果dones是false或者下边的按钮在选中状态,就将这一条item push到arr中*/ for(var i=0;i<items.length;i++){ if(items[i].done==false){ arr.push(items[i]); }else{ if(flag==true){ arr.push(items[i]); } } } return arr; } }); app.controller("crtl",function ($scope) { $scope.data=data; $scope.complate=false; /*判断还有几件事儿没有完成*/ $scope.count=function(){ var n=0; /*判断还有几件事儿没有完成*/ for(var i=0;i<$scope.data.items.length;i++){ if($scope.data.items[i].done==false){ n++; } } return n; }; /*添加新的日程*/ $scope.add=function(){ /*对$scope.action进行一下非空判断*/ if($scope.text){ /*如果输入了内容之后,就在数组的最后加入一条新内容*/ $scope.data.items.push({"action":$scope.text,"done":false}); /*添加完成之后,将input置空*/ $scope.text=""; } }; }); </script> </head> <body ng-app="mpp" ng-controller="crtl"> <h2>小白的日程</h2> <input type="text" ng-model="text"> <button ng-click="add()">添加</button> <table> <tr> <th>序号</th> <th>日程</th> <th>完成</th> </tr> <tr ng-repeat="item in data.items|doFilter:complate"> <td>{{$index}}</td> <td>{{item.action}}</td> <td><input type="checkbox" ng-model="item.done"></td> </tr> </table> <div> <input type="checkbox" ng-model="complate"> </div> </body> </html>
angularJS 做一个日程表
最新推荐文章于 2023-10-28 12:42:37 发布