如何在带有过滤器的 ng-repeat 中使用 ng-model？答案

【问题标题】：How to use ng-model in ng-repeat with filter?如何在带有过滤器的 ng-repeat 中使用 ng-model？
【发布时间】：2014-11-07 12:03:12
【问题描述】：

我想在表格的每一列中添加输入文本框，以根据相应的列搜索对表格进行过滤。
这是我的表格搜索行的 HTML 代码：

<tr>
    <td ng-repeat="column in columns">
        <div class="right-inner-addon">
            <input type="text" class="form-control input-sm" ng-model="$parent.searchTableQuery.column.field">
        </div>
    </td>
</tr>

这是我的过滤器代码：

<tbody>
    <tr ng-repeat="item in dataSource | filter:searchTableQuery | orderBy:predicate:reverse">
        <td ng-repeat="key in getKeysOfCollection(item)">{{item[key]}}</td>
    </tr>
</tbody>

但在这里我无法根据表格列搜索过滤表格。
我无法在搜索输入框中提供有效的 ng-model。

ng-model="$parent.searchTableQuery.$" is ng-model of table search input box.

更新

我已将我的问题更新至：http://plnkr.co/edit/5vjsRdRLTFgXhvqHVkWA?p=preview
在此问题中，搜索仅适用于 Id 列，不适用于任何其他列。

【问题讨论】：

标签： angularjs angular-ngmodel

【解决方案1】：

请看下面的演示

您可以创建如下的通用过滤器标题：

<tr>
  <th ng-repeat="(key, value) in myArray[0]">
      <input type="text" ng-model="search[key]" />
    </th>
</tr>

angular.module('MyModule', [])

.controller('MyController', function($scope) {

  $scope.search = {};

  $scope.colors = [{
    id: 11,
    name: 'black',
    shade: 'dark'
  }, {
    id: 22,
    name: 'white',
    shade: 'light'
  }, {
    id: 32,
    name: 'red',
    shade: 'dark'
  }, {
    id: 44,
    name: 'blue',
    shade: 'dark'
  }, {
    id: 5,
    name: 'yellow',
    shade: 'light'
  }];




});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='MyModule' ng-controller="MyController">


  <table border="1">
    <thead>
      <tr>
        <th ng-repeat="(key, value) in colors[0]">
          <input type="text" ng-model="search[key]" />
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <tr ng-repeat="c in colors | filter:search">
          <td>{{c.id}}</td>
          <td>{{c.name}}</td>
          <td>{{c.shade}}</td>
        </tr>

    </tbody>
  </table>
</div>

【讨论】：

在这里，通过使用上面的示例，我能够在搜索输入中创建 ng-model 但无法执行搜索，因为我的 tbody 也是由 ng-repeat 使用键创建的（如问题所示）。
@SachinKumbharkar 能否请你创建 plunkr，因为没有它很难提供建议。
@SachinKumbharkar 你用的是什么浏览器，plunkr 在 Firefox 和 Chrome 中非常适合我？
我已经在plnkr.co/edit/5vjsRdRLTFgXhvqHVkWA 更新了我的工作 plunkr。唯一的区别是我使用键值在表行而不是对象属性中添加值。

【解决方案2】：

我上面的代码中存在无效的密钥问题。
我已经根据 sylwester 的代码解决了我的问题，如下所示：

  <table border="1">
    <thead>
      <tr>
        <th ng-repeat="key in getKeysOfCollection(colors[0])">{{key}}
          <input type="text" ng-model="search[key]"  />
        </th>
      </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in colors | filter:search">
          <td ng-repeat="key in getKeysOfCollection(item)">{{item[key]}}</td>
        </tr>

    </tbody>
  </table>

  $scope.search = {};

  $scope.colors = [{
    'id': 1,
    'productId': 1001,
    'productName': 'prd 1',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-01T06:41:30.809Z'
  }, {
    'id': 2,
    'productId': 1002,
    'productName': 'prd 2',
    'minimumLevel': 23,
    'price': 12.54,
    'productDate': '2014-11-02T06:41:30.809Z'
  }, {
    'id': 3,
    'productId': 1003,
    'productName': 'prd 3',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-04T06:41:30.809Z'
  }, {
    'id': 4,
    'productId': 1004,
    'productName': 'prd 4',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-22T06:41:30.809Z'
  }, {
    'id': 5,
    'productId': 1005,
    'productName': 'prd 5',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-18T06:41:30.809Z'
  }];

  $scope.getKeysOfCollection = function(obj) {
    obj = angular.copy(obj);
    if (!obj) {
      return [];
    }
    return Object.keys(obj);
  }

现在，我可以根据列搜索过滤表，而无需在 ng-repeat 中指定列名。
工作人员在http://plnkr.co/edit/5vjsRdRLTFgXhvqHVkWA

【讨论】：