filter angularjs 过滤器

定义：从一个数组中根据某种规则返回新的数组。

语法：

在html中

{{ filter_expression | filter : expression : comparator}}

在javascript中：

$filter('filter')(array, expression, comparator)

参数类型参数说明

arrry:数组

expression:有三种类型

string:该字符串用于匹配对数组的内容。匹配这个字符串的所有字符串或对象中带字符串属性值的数组将被返回。这也适用于嵌套的对象的属性。规则可以通过前缀字符串取反“！”

 <div ng-init="friends = [{name:'John', phone:'555-1276'},
                         {name:'Mary', phone:'800-BIG-MARY'},
                         {name:'Mike', phone:'555-4321'},
                         {name:'Adam', phone:'555-5678'},
                         {name:'Julie', phone:'555-8765'},
                         {name:'Juliette', phone:'555-5678'}]"></div>

Search: <input ng-model="searchText">
<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>

或者

<input ng-model="search.name">
<li ng-repeat="friend in friends | filter:search">
  {{friend.name}}
</li>

效果：

filter angularjs 过滤器

object:一个对象可用于在数组对象中过滤特定的属性。例如{name：“M”，phone：“1”}规则将返回属性‘name’包含“M”和‘phone’包含“1”的的数组。一个特殊的属性名称$可以使用（如{$：“text”}）接受对象的任何属性或它的嵌套对象的属性值中含“text”相匹配。规则可以通过前缀字符串和否定符“！”一起使用，例如{name：“!m”}规则将返回具有不包含“M”属性名的数组。

需要注意的是已命名属性将匹配仅在同一水平的属性，而特殊的$属性将匹配于相同的水平或更深的属性。例如数组项目如{name：{first：'john'，last：'lisi'}}将不会被{name：'john'}匹配，但会被{$：'john'}匹配

效果：

<table id="searchObjResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in friends | filter:{$:'1'}">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>

filter angularjs 过滤器

<table id="searchObjResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in friends | filter:{name:'m'}">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>

filter angularjs 过滤器

<table id="searchObjResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in friends | filter:{name:'m',phone:'1'}">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>

filter angularjs 过滤器

function(value, index)::函数可用于写入任意过滤器。该函数调用数组的每个元素。最后的结果是，返回值是”true“的元素的数组

html

<li ng-repeat="user in users | filter:isStatus">

$scope.status = ;
$scope.users = [{name: },
                {name: },
                {name: }];

$scope.isStatus = function(user){
    return (user.status == $scope.status);
};

var myApp = angular.module('myApp', []);
myApp.filter('isStatus', function() {
  return function(input, status) {
    var out = [];
      ; i < input.length; i++){
          if(input[i].status == status)
              out.push(input[i]);
      }
    return out;
  };
});

html

<li ng-repeat="user in users | isStatus:3">

html

<li ng-repeat="user in users | filter:byStatusId(3)">
        <span>{{user.name}}</span>
    <li>

$scope.byStatusId = function(statusId) {
    return function(user) {
        return user.status.id == statusId;
    }
}

秒客网

filter angularjs 过滤器

相关文章