javascript - Angular js 过滤某些对象键

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

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

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