angularjs的添加，显示隐藏

来源：互联网发布：淘宝设置主营类目编辑：程序博客网时间：2024/05/17 07:29
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--导包-->    <script src="angular-1.5.5/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 myapp=angular.module("myapp",[]);        //过滤        myapp.filter("todo",function(){            return function(a,flag){                var arr=[];                for(var i=0;i<a.length;i++){                    if(a[i].done==false){                        arr.push(a[i])                    }else{                        if(flag==true){                            arr.push(a[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){                        n++;                    }                }                return n;            };            //添加            $scope.addItem=function(){                $scope.data.items.push({'action':$scope.add,'done':false});            }        })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><h1>{{data.user}}的日程表<span>{{count()}}</span></h1><input type="text" ng-model="add"><button ng-click="addItem()">添加</button><table>    <thead>    <tr>        <th>序号</th>        <th>日程</th>        <th>完成</th>    </tr>    </thead>    <tbody>    <tr ng-repeat="item in data.items|todo:complate">        <td>{{$index}}</td>        <td>{{item.action}}</td>        <td><input type="checkbox" ng-model="item.done"></td>    </tr>    </tbody></table><div>显示全部<span><input type="checkbox" ng-model="complate"></span></div></body></html>
阅读全文
0 0