Question

我想在表的每一列添加输入文本框，以根据各自的列搜索对表进行过滤。
这是我的搜索行表的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列，并且不适用于任何其他列。

Answer 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>

Answer 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

如何在ng-repeat中使用ng-model和filter？

更新

2 个答案: