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

来源：互联网发布：mac钥匙串怎么关闭编辑：程序博客网时间：2024/06/05 02:56

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

阅读全文

1 0