类似于记事本

最新推荐文章于 2022-04-25 11:29:34 发布

Charlie·

最新推荐文章于 2022-04-25 11:29:34 发布

阅读量300

点赞数

<!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>