Question

我的页面上有一个数据对象，但我在一个部分内希望它可以过滤。我希望有一个输入字段可以过滤数据，但我希望能够选择我过滤的字段，而不是对象中的所有数据。

我在这里做了一个简单的例子http://plnkr.co/edit/huuZ0q0B0ijogXL9ThnX?p=preview

    <div ng-init="friends = [{
    random:{
        tv: 'bbc'
    },name:'John', phone:'555-1276'},
      {random:{
          tv:'bbc'},name:'Mary', phone:'800-BIG-MARY'},
      {random:{
          tv:'itv'},name:'Mike', phone:'555-4321'},
      {random:{
          tv:'itv'},name:'Adam', phone:'555-5678'},
      {random:{
          tv:'itv'},name:'Julie', phone:'555-8765'},
      {random:{
          tv:'itv'},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>

我已经添加了一个名为random的密钥，其中包含tv（例如bbc的值），如果你将bbc输入到他们都显示的输入字段中，但我只想搜索姓名和/或电话。

对此的任何帮助将不胜感激。

Answer 1

您可以创建自定义过滤器，我相信使用默认过滤器的多个键不支持or。

angular.module('app',[]).filter('customFilter', function(){
     return function(input, searchText){

       if(!angular.isArray(input)) return;

       var exp = new RegExp(searchText, 'ig');
       return input.filter(function(inp){
          return exp.test(inp.name) || exp.test(inp.phone);
       });
     }
  });

<强> Plnk1

或者更通用的一种，你可以传递密钥来搜索： -

  angular.module('app',[]).filter('customFilter', function(){
     return function(input, searchText, fields){

       if(!angular.isArray(input)) return;

          var exp = new RegExp(searchText, 'ig');
          fields = fields.split(',');

          return input.filter(function(inp){
            return fields.some(function(key){
              return exp.test(inp[key])
            });
          });
       }
  });

并用作：

<tr ng-repeat="friend in friends | customFilter:searchText:'name,phone'">

<强> Plnk2

See compatibility and polyfill for Array.prototype.some

Angular js过滤某些对象键

1 个答案: