如何创建具有双向绑定的复合过滤器？答案

【问题标题】：How to create a composite filter with two way binding?如何创建具有双向绑定的复合过滤器？
【发布时间】：2013-03-30 21:26:25
【问题描述】：

我想在表格中显示项目列表，并允许用户使用表单控件过滤项目。

我的问题
当控制器首次执行时，我能够完成此操作，但是当我更改输入的值时，表格不会使用正确的数据重新呈现。

我的问题
如何根据表单字段中的新值过滤表格？

实例
http://plnkr.co/edit/7uLUzXbuGis42eoWJ006?p=preview

Javascript

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
    $scope.travelerFilter = 2;
    $scope.groupFilter = "A";

    $scope.records = [
        { leadName: "Jesse", travelerCount: 1, group: "A"},
        { leadName: "John", travelerCount: 1, group: "B"},
        { leadName: "James", travelerCount: 2, group: "A"},
        { leadName: "Bill", travelerCount: 2, group: "B"}
    ];

    var travelerCountFilter = function(record) {
        return record.travelerCount >= $scope.travelerFilter;
    };

    var groupFilter = function(record) {
        return record.group === $scope.groupFilter;
    };

    $scope.filteredRecords = _.chain($scope.records)
        .filter(travelerCountFilter)
        .filter(groupFilter)
        .value();
});

HTML

<!doctype html>
<html ng-app="plunker" >
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">

  <p>Show records with at least <input type="number" ng-model="travelerFilter" /> travelers.</p>
  <p>Group <input type="text" ng-model="groupFilter" /></p>

  <table>
      <tr>
        <th>Name</th>
        <th>Count</th>
        <th>Group</th>
      </tr>
      <tr ng-repeat="record in filteredRecords">
          <td>{{record.leadName}}</td>
          <td>{{record.travelerCount}}</td>
          <td>{{record.group}}</td>
      </tr>
  </table>
</body>
</html>

【问题讨论】：

标签： javascript angularjs filtering

【解决方案1】：

您可以将过滤器指定为 ng-repeat 的一部分，即：

<tr ng-repeat="record in records | filter:{group:groupFilter} | filter:{travelerCount:travelerFilter}">

在此处查看实时版本：http://plnkr.co/edit/1UcGDpwUAbtvEhUyCFss?p=preview

【讨论】：

谢谢克里斯。我绝对可以通过这种方式解决手头的问题。我是真的希望能够在 Angular 中创建类似 KnockoutJS 计算属性的东西，而不是创建多个过滤器。我会继续打猎。

【解决方案2】：

angular 可以自动为你进行双向绑定，无需过滤器：

JS：

$scope.filteredRecords = function() {
  return $scope.records.filter(function(record, i) {
    return record.travelerCount === $scope.travelerFilter &&
      record.group === $scope.groupFilter;
  });
}

HTML：

<tr ng-repeat="record in filteredRecords()">

在此处查看实时示例：http://plnkr.co/edit/aeBv2soGG06Trpp9WI4f?p=preview

【讨论】：