如何使用复选框来过滤 Angular 的结果？

我正在尝试使用复选框应用过滤器。

复选框正确显示：

<div data-ng-repeat="cust in customers">
    <input type="checkbox" data-ng-model="search.city" data-ng-true-value="{{ cust.city }}" data-ng-false-value=""/> {{ cust.city }}
</div>

但是当选中任何复选框时，什么也没有发生：

<table>

    <!-- table heading goes here -->

    <tbody>
        <tr data-ng-repeat="customer in customers | filter : search">
            <td >
                {{ customer.firstName }}
            </td>
            <td >
                {{ customer.lastName }}
            </td>
            <td >
                {{ customer.address }}
            </td>
            <td >
                {{ customer.city }}
            </td>
        </tr>
    </tbody>
</table>

该表显示了所有客户。

我想要实现的是：当选中一个或多个复选框时，表格必须仅显示与选中的复选框条件匹配的这些行。

我需要做什么才能使其正常工作？

您可以将函数传递给 AngularJS 过滤器。例如：

将您的输入标签设置为：

<input type="checkbox" ng-model="search[cust.city]" /> {{ cust.city }}

将您的过滤器设置为：

<tr data-ng-repeat="customer in customers | filter:searchBy() ">

在你的控制器中：

function ctrl($scope) {
  $scope.customers = [...];

  $scope.search = {};    
  $scope.searchBy = function () {
    return function (customer) {
      if ( $scope.search[customer.city] === true ) {
        return true;
      }
    }
  };
}

如果您希望在启动时向所有客户显示，只需初始化$scope.search with city来自customers array.

这是一个 Plunker 示例 http://plnkr.co/edit/pd2qldSeHQ9lwdfhQAmG?p=preview.