javascript 如何使用复选框通过 Angular 过滤结果？

How to use checkbox to filter results with Angular?

提问by Martijn

I am trying to apply a filter using checkboxes.

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

The checkboxes are shown correctly:

复选框显示正确：

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

but when checking any checkbox, nothing happens:

但是在检查任何复选框时，没有任何反应：

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

The table shows all the customers.

该表显示了所有客户。

What I want to achieve is: when one or more checkboxes are checked, the table has to show only these rows which match the condition of the checked checkboxes.

我想要实现的是：当检查一个或多个复选框时，表只能显示匹配选中复选框的条件的这些行。

What do I have to do to get this working?

我该怎么做才能让它发挥作用？

采纳答案by JayQuerie.com

It looks like you are providing a list of customers, and when one or more is selected, display a table of customers that are in the same city as those customers that are selected.

It looks like you are providing a list of customers, and when one or more is selected, display a table of customers that are in the same city as those customers that are selected.

To do this, you will need a custom filter:

为此，您需要一个自定义过滤器：

// Define our filter
app.filter('selectedCustomerCities', function($filter) {
  return function(customers) {
    var i, len;

    // get customers that have been checked
    var checkedCustomers = $filter('filter')(customers, {checked: true});

    // Add in a check to see if any customers were selected. If none, return 
    // them all without filters
    if(checkedCustomers.length == 0) {
      return customers;
    }

    // get all the unique cities that come from these checked customers
    var cities = {};
    for(i = 0, len = checkedCustomers.length; i < len; ++i) {
      // if this checked customers cities isn't already in the cities object 
      // add it
      if(!cities.hasOwnProperty(checkedCustomers[i].city)) {
        cities[checkedCustomers[i].city] = true;
      }
    }

    // Now that we have the cities that come from the checked customers, we can
    //get all customers from those cities and return them
    var ret = [];
    for(i = 0, len = customers.length; i < len; ++i) {
      // If this customer's city exists in the cities object, add it to the 
      // return array
      if(cities[customers[i].city]) {
        ret.push(customers[i]);
      } 
    }

    // we have our result!
    return ret;
  };
});

Your markup will then change into something like this:

然后你的标记会变成这样：

<div data-ng-repeat="customer in customers">
  <!-- record that this customer has been selected -->
  <input type="checkbox" ng-checked="customer.checked" ng-model="customer.checked" /> {{ customer.city }}
</div>

<table>
  <!-- table heading goes here -->
  <tbody>
      <!-- use our custom filter to only display customers from the cities selected -->
      <tr data-ng-repeat="customer in customers | selectedCustomerCities">
          <td>{{ customer.firstName }}</td>
          <td>{{ customer.lastName }}</td>
          <td>{{ customer.address }}</td>
          <td>{{ customer.city }}</td>
      </tr>
  </tbody>
</table>

You can see it working at this Plunker: http://plnkr.co/edit/GlHRLKECR4jeBS7Vf7TX?p=preview

你可以看到它在这个 Plunker 上工作：http://plnkr.co/edit/GlHRLKECR4jeBS7Vf7TX?p=preview

回答by marcoseu

You can pass a function to the AngularJS filter. For example:

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

Set you input tag as:

将您的输入标签设置为：

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

Set your filter as:

将过滤器设置为：

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

In your controller:

在您的控制器中：

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

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

If you wish to show all customer at startup, simply initialise $scope.searchwith cityfrom the customersarray.

如果你想显示所有的客户在启动时，简单地初始化$scope.search与city从customers阵列。

Here is a sample Plunker.

这是一个示例 Plunker。