给大家做了一个关于日程的例子,可以参考一下,对进一步学习有所帮助

最新推荐文章于 2024-10-19 18:15:36 发布

努力努力更努力

最新推荐文章于 2024-10-19 18:15:36 发布

阅读量374

点赞数

分类专栏： angluarjs

angluarjs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: 1px solid #000;
            border-collapse: collapse;
        }
        td{
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
    <script src="../script/angular.min.js"></script>
    <script>
        var data={
            user:"小名",
            items:[
                {action:"约赵丽颖吃饭",done:false},
                {action:"约赵丽颖跳舞",done:false},
                {action:"约赵丽颖敲代码",done:false},
                {action:"约赵丽颖逛街",done:false},
                {action:"约赵丽颖看电影",done:true},
                {action:"约赵丽颖看星星",done:false}
            ]
        };

       var myapp=angular.module("myapp",[]);
        myapp.filter("doFilter",function () {
            return function (items,complate) {
                var arr=[];
                for(var i=0;i<items.length;i++){
                    if(items[i].done==false){
                        arr.push(items[i]);
                    }else {
                        if (complate==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){
                        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>
    <tr>
        <td>序号</td>
        <td>日程</td>
        <td>完成情况</td>
    </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>