<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../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} ] }; console.log(data); var myapp = angular.module("myapp", []); myapp.filter("diFilter", function () { return function (items, flag) { var 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; } }); myapp.controller("myctrl", 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) { console.log(i); n++; } } return n; }; $scope.add = function () { if ($scope.action) { $scope.data.items.push({"action": $scope.action, "done": false}) $scope.action = ""; } } }); </script> </head> <body ng-app="myapp" ng-controller="myctrl"> <h2>吴四的日程<span ng-bind="count()"></span></h2> <div> <input type="text" ng-model="action"> <button ng-click="add()">添加</button> </div> <table> <thead> <th>序号</th> <th>日程</th> <th>完成情况</th> </thead> <tbody> <tr ng-repeat="item in data.items|diFilter:conplate"> <td>{{$index}}</td> <td>{{item.action}}</td> <td><input type="checkbox" ng-model="item.done"></td> </tr> </tbody> </table> <div>显示全部<input type="checkbox" ng-model="conplate"></div> </body> </html>
类似于记事本
最新推荐文章于 2022-04-25 11:29:34 发布