AngularJS+日程表+显示、隐藏 +orderBy排序

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

Logitech12

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

阅读量697

点赞数 1

本文链接：https://blog.csdn.net/logitech12/article/details/78225201

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 app = angular.module("myapp",[]);
        app.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;
            }
        })
        app.controller("mycont",function ($scope) {
            $scope.data = data;
            $scope.count = function () {
                var n = 0;
                for (var i=0;i<data.items.length;i++){
                    if (data.items[i].done == false){
                        n++;
                    }
                }
                return n;
            }
            $scope.add = function () {
                $scope.data.items.push({action:$scope.additem,done:false});
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="mycont">
<h2>{{data.user}}的日程<span>{{count}}</span></h2>
 <input type="text" ng-model="additem">
  <button ng-click="add()">添加</button>
 <table border="soild 1px #000" cellpadding="10" cellspacing="0">
     <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>显示全部<input type="checkbox" ng-model="complate"></div>
</body>
</html>

orderBy排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格排序</title>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var app = angular.module("myapp",[]);
        app.controller("mycont",function ($scope) {
            $scope.arr = ["1","2","3","4"];
            $scope.data = [{
                "name":"zs",
                "age":"20",
                "sex":"boy",
                "salary":"15000"
            },{
                "name":"ls",
                "age":"22",
                "sex":"boy",
                "salary":"13000"
            },{
                "name":"ww",
                "age":"18",
                "sex":"girl",
                "salary":"12000"
            }];
            $scope.ins="";
            $scope.revers = false;
            $scope.sortColumn = "name";
            $scope.sort = function (count) {
                if($scope.sortColumn == count){
                    $scope.revers=!$scope.revers;
                }
                $scope.sortColumn = count;
            }
        })
        app.filter("word",function () {
            return function (msg,flag) {
                return msg.replace(/枪|法功/g,flag);
            }
        })
        app.filter("word2",function () {
            return function (msg,flag) {
                return msg.replace(/枪|法功/g,function () {
                    var contant = "";
                    for (var i = 0; i < word.length; i++){
                        contant+="*";
                    }
                    return contant;
                });
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="mycont">
	//自定义过滤器
    <p>{{1000|currency:"￥"}}</p>
    <p>{{"Hello"|uppercase}}</p>
    <p>{{"Hello"|lowercase}}</p>
    <p>{{1507774056568|date:"yyyy-MM-dd hh-ss-mm EEE"}}</p>
    <ul>
        <li ng-repeat="item in arr|limitTo:2">{{item}}</li>
    </ul>
    <input type="text" ng-model="search">
    <table cellpadding="10" cellspacing="0" border="solid 1px #000" >
        <thead>
        <tr>
            <th ng-click="sort('name')">姓名</th>
            <th ng-click="sort('age')">年龄</th>
            <th ng-click="sort('sex')">性别</th>
            <th ng-click="sort('salary')">薪资</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in data|filter:{name:search}|orderBy:sortColumn:revres">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.salary}}</td>
        </tr>
        </tbody>
    </table>
    <input type="text" ng-model="ins">
    <p>{{ins|word:'#'}}</p>
    <p>{{ins|word2}}</p>
</body>
</html>

Logitech12

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS+日程表+显示、隐藏 +orderBy排序

html>html lang="en">head> meta charset="UTF-8"> title>日程表title> script src="../angular-1.5.5/angular.min.js">script> script> var data = { user:"李四", i
复制链接

扫一扫