Angular Order And Filter

排序

angular 排序可以使用orderBy标签,它支持一个排序函数或简单地指定一个属性名进行排序

# HTML5
<div ng-controller="TestCtrl">
    根据age正排序
    {{ data | orderBy: 'age' }} <br/>
    根据age倒排序
    {{ data | orderBy: '-age' }} <br/>
    根据age正排序,取前2个
    {{ data | orderBy: '-age' | limitTo: 2 }} <br/>
    根据age倒排序,name正排序
    {{ data | orderBy: ['-age', 'name'] }} <br/>
</div>
# JS 给data的值
$scope.data = [{name: 'B', age: 4},{name: 'A', age: 1},{name: 'D', age: 3},{name: 'C', age: 3}];

{ {orderBy_expression | orderBy : expression : reverse : comparator} }
orderBy_expression:数组
expression:一个String或者是一个function,用来比较的基准
reverse:反转
comparator:比较器

可以使用ng-repeat遍历,以表格形式显示

<tr ng-repeat="friend in friends | orderBy:['-age', 'name']">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.age}}</td>
</tr>

JS里用order

# JS
angular.module('orderByExample', [])
            .controller('ExampleController', ['$scope','orderByFilter', function($scope, orderBy)  {
            var friends = [
                                {name: 'John',   phone: '555-1212',  age: 10},
                                {name: 'Mary',   phone: '555-9876',  age: 19},
                                {name: 'Mike',   phone: '555-4321',  age: 21},
                                {name: 'Adam',   phone: '555-5678',  age: 35},
                                {name: 'Julie',  phone: '555-8765',  age: 29}
                            ];
            $scope.friends = orderBy(friends, 'age', $scope.reverse);
            }
# HTML5
<tr ng-repeat="friend in friends">

类似自定义的比较function即comparator等
更多内容见Angular官方文档

过滤

可以非常方便的对表格进行过滤
格式如下:
{ { filter_expression | filter : expression : comparator : anyPropertyKey} }
使用方法:

1	{{ friends \| filter: 'J' }}

即对friends数组进行过滤,找到里面包含J字样的所有值。

使用表格:

<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</table>

即根据输入框的值searchText过滤friends数组的内容,并且以表格的形式显示。

更多过滤条件:

<label>Any: <input ng-model="search.$"></label> <br>
<label>Name only <input ng-model="search.name"></label><br>
<label>Phone only <input ng-model="search.phone"></label><br>
<label>Equality <input type="checkbox" ng-model="strict"></label><br>
<table id="searchObjResults">
    <tr>
        <th>Name</th>
        <th>Phone</th>
    </tr>
    <tr ng-repeat="friendObj in friends | filter:search:strict">
        <td>{{friendObj.name}}</td>
        <td>{{friendObj.phone}}</td>
    </tr>
</table>

strict表示严格筛选,只有字段与搜索内容完全一致才显示。
search是筛选条件,这里可以全部一起筛选,或者只根据姓名或者电话进行筛选。

筛选条件不仅可以是字段名,还可以是自定义的函数
使用方法:

# HTML5
使用函数过滤,年龄大与19的:{{ friends | filter: f }} <br />
# JS
$scope.f = function(e){
    return e.age > 19;
}

更多filter内容见angular官方文档

例子代码:
Github简单例子
 Github OrderBy例子
 Github filter例子

2016-10-08