AngularJS学习记录-过滤器的应用

来源：互联网发布：手机红外夜视仪软件编辑：程序博客网时间：2024/05/21 17:56

AngularJS学习记录-过滤器的应用

表头排序

表头排序是指在使用列表方式显示数据时，用户如果点击列表中某列的表头元素，那么，列表中的全部数据将会自动按该列的属性值自动排序，默认为升序排列，再次点击该列表表头元素时，则又变为降序。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="../js/angular.min.js"></script>    <style>        body{            font-size:12px;        }        ul{            list-style-type: none;            width: 408px;            margin:0;            padding:0;        }        ul li{            float: left;            padding:5px 0;        }        ul .bold{            font-weight: bold;            cursor:pointer;        }        ul li span{            width: 52px;            float:left;            padding:0 10px;        }        ul .focus{            background-color:#cccccc;        }    </style></head><body ng-app="app" ng-controller="myCtr">    <div>        <ul>            <li ng-class="{{bold}}">                <span>序号</span>                <span ng-click="title='name';desc=!desc">姓名</span>                <span ng-click="title='sex';desc=!desc">性别</span>                <span ng-click="title='age';desc=!desc">年龄</span>                <span ng-click="title='score';desc=!desc">分数</span>            </li>            <li ng-repeat="stu in data | orderBy : title : desc">                <span>{{$index+1}}</span>                <span>{{stu.name}}</span>                <span>{{stu.sex}}</span>                <span>{{stu.age}}</span>                <span>{{stu.score}}</span>            </li>        </ul>    </div></body><script>     var app = angular.module('app',[]);     app.controller('myCtr',['$scope',function($scope){         $scope.bold = 'bold';         $scope.title = 'name';         $scope.desc = 0;         $scope.data = [             {name : "小明",sex : "男",age : 24,score : 88},             {name : "张东",sex : "男",age : 21,score : 90},             {name : "小花",sex : "女",age : 25,score : 95},             {name : "张蕾",sex : "女",age : 19,score : 86}         ];     }]);</script></body></html>

源码分析：
首先，向页面控制器代码中添加’title’,’desc’两个属性，分别用与绑定排序时的属性名称和排序方向，并赋予初始值’name’和0,表示数据初始化时按’姓名’属性的升序排列

 $scope.title = 'name'; $scope.desc = 0;

然后，页面的视图模板中，当通过ng-repeat指令复制并显示数据时，调用可’orderBy’过滤器，并带有两个参数，第一个冒号后面的参数指定排序的属性名，第二个冒号后的参数指定排序的方向，该参数默认或缺省时为升序*，1为降序，0为升序*。最后在各个表头元素的点击(ng-click)事件中，分别对’title’和’desc’属性值进行重置，由于这两个属性与’orderBy’已经绑定，所以改变这两个值的同时，会改变列表的排序，最终实现表头排序功能。

总结：

在例子中可以看到(ng-click)里可以直接改变数值，而不需要声明一个function去调用。
< span ng-click="title='score';desc=!desc">分数</ span >中可以发现，desc=!desc，其实等同于desc = desc == 1 ? 0 : 1。

字符查找

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>ng-repeat</title>    <script src="../js/angular.min.js"></script>    <style>        body{            font-size:12px;        }        ul{            list-style-type: none;            width: 408px;            margin:0;            padding:0;        }        ul li{            float: left;            padding:5px 0;        }        ul .bold{            font-weight: bold;            cursor:pointer;        }        ul li span{            width: 52px;            float:left;            padding:0 10px;        }        ul .focus{            background-color:#cccccc;        }    </style></head><body ng-app="app" ng-controller="myCtr">    <div>        <input type="text" id="tetkey" ng-model="key" placeholder="请输入姓名关键字">    </div>    <div>        <ul>            <li ng-class="{{bold}}">                <span>序号</span>                <span ng-click="title='name';desc=!desc">姓名</span>                <span ng-click="title='sex';desc=!desc">性别</span>                <span ng-click="title='age';desc=!desc">年龄</span>                <span ng-click="title='score';desc=!desc">分数</span>            </li>            <li ng-repeat="stu in data | filter : {name:key}">                <span>{{$index+1}}</span>                <span>{{stu.name}}</span>                <span>{{stu.sex}}</span>                <span>{{stu.age}}</span>                <span>{{stu.score}}</span>            </li>        </ul>    </div></body><script>     var app = angular.module('app',[]);     app.controller('myCtr',['$scope',function($scope){         $scope.bold = 'bold';         $scope.key = '';         $scope.data = [             {name : "小明",sex : "男",age : 24,score : 88},             {name : "张东",sex : "男",age : 21,score : 90},             {name : "小花",sex : "女",age : 25,score : 95},             {name : "张蕾",sex : "女",age : 19,score : 86}         ];     }]);</script></body></html>

源码分析：
首先，在页面的控制器代码中添加一个名为’key’的属性，用于保存用户在文本框的输入的字符内容，该属性的初始值为空。
然后，在通过’ng-repeat’指令显示数据时，调用Angualr中的’filter’过滤器，并添加一个对象性字符参数，制定在数据对象的’name’属性中查找’key’值，即在”姓名”属性中查找文本框输入的内容，如果找到就显示，如果没有找到则不显示。
最后，在页面视图模板中，通过”ng-model”指令双向数据绑定控制器中的”key”的值将自动同步更新。

0 0