AngularJS - 过滤对象中的选定属性

时间:2015-03-31 07:39:11

标签: javascript angularjs filtering angularjs-filter

角度$filter('filter')中是否有任何方式来过滤有限的属性。

Plnkr

HTML

<body ng-controller="MyCtrl">
      <input type="type" ng-model="filter_value" />
      <ul>
        <li ng-repeat="row in data | filter: filter_value">{{row.name +'--'+ row.age}}</li>
      </ul>
    </body>

JS

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope, $filter) {
  $scope.data = [
    {name: "Moroni", age: 50, secret: 'one'},
    {name: "Tiancum", age: 43, secret: 'one'},
    {name: "Jacob", age: 27, secret: 'two'},
    {name: "Nephi", age: 29, secret: 'two'},
    {name: "Enos", age: 34, secret: 'two'}
  ];
});

问题
我有一个名为secret的属性,我不希望用户根据该字段进行过滤,即,如果用户输入onetwo,则应根据权限name进行过滤, age而非secret

有没有办法在内置角度过滤器中做到这一点?

1 个答案:

答案 0 :(得分:0)

您必须使用自定义过滤器手动排除不需要的字段。

这是一个固定的plnkr

HTML:

<body ng-controller="MyCtrl">
  <input type="type" ng-model="search.filter_value" />
  <ul>
    <li ng-repeat="row in data | usersListFilter:search.filter_value">{{row.name +'--'+ row.age}}</li>
  </ul>
</body>

的javascript:

app.filter('usersListFilter', usersListFilter);

function usersListFilter() {
  return function(usersArray, searchTerm){
    if (!searchTerm) return usersArray;

    var term = searchTerm.toLowerCase();
    return usersArray.filter(function(user) {
      return user.name.toLowerCase().indexOf(term) != -1 || user.age.toString().indexOf(term) != -1;
    });
  };
}