AngularJS : 过滤器orderBy用法

10月 16, 2017

分类:Web

API定义：通过expression来排序指定的array 。字符串按字母顺序排序，数字按大小排序。注意：如果你发现数字没被正确排序，请确认它们保存的是数字而不是字符串。

实现：在表格中，点击表头可使下边的数据按顺序排列，多次点击切换正倒排序

AngularJS_orderBy

代码:

HTML：

01<!--过滤器orderBy的用法-->
02<table>
03    <tr>
04        <th><a href="javascript:void(0)" ng-click="orderField='name';reverse=!reverse;">姓名</a></th>
05        <th><a href="javascript:void(0)" ng-click="orderField='phone';reverse=!reverse;">电话</a></th>
06    </tr>
07 
08    <!--使用ng-repeat指令渲染所有的朋友数据-->
09    <tr ng-repeat="friend in friends|orderBy:orderField:reverse">
10        <td>{{friend.name}}</td>
11        <td>{{friend.phone}}</td>
12    </tr>
13</table>

JS：

01//声明filterCpntroller
02cart.controller('filterController',function ($scope) {
03 
04    //声明一个数组用于演示过滤器filter的用法
05    $scope.friends = [
06        {name:'John',phone:'333-2332'},
07        {name:'Alex',phone:'255-2332'},
08        {name:'Elaine',phone:'333-4556'},
09        {name:'Sam',phone:'111-2332'},
10        {name:'Peter',phone:'333-0987'},
11        {name:'Adam',phone:'5442-2467'},
12 
13    ];
14 
15    //排序字段定义：可能选项是'name','phone'
16    $scope.orderField = 'name';
17 
18    //正序或倒序
19    $scope.reverse = true;
20});