angularJS 做一个日程表

最新推荐文章于 2024-04-26 09:57:02 发布

余生I

最新推荐文章于 2024-04-26 09:57:02 发布

阅读量1k

点赞数

分类专栏： angularJS

本文链接：https://blog.csdn.net/qq_39357892/article/details/78082683

版权

angularJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

余生I

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularJS 做一个日程表

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="ajs/angular.min.js">script> script> var data = { user:"吴四", items:[
复制链接

扫一扫