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

Question

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

复选框显示正确:

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

该表显示了所有客户。

我想实现的是:当一个或多个复选框被选中时，表格必须只显示符合选中复选框条件的行。

我需要做什么才能让它正常工作？

Answer 1

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

将您的输入标签设置为:

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

将您的过滤器设置为:

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

在你的 Controller 中:

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

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

如果您希望在启动时显示所有客户，只需使用 customers 数组中的 city 初始化 $scope.search。

Here is a sample Plunker .