Comment utiliser la case à cocher pour filtrer les résultats Angulaire?

On dirait que vous êtes en fournissant une liste de clients, et lorsque l'un ou plusieurs est sélectionné, l'affichage d'un tableau de clients qui sont dans la même ville que ceux de vos clients qui sont sélectionnés.

Pour ce faire, vous aurez besoin d'un filtre personnalisé:

//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;
  };
});

Votre balisage changer en quelque chose comme ceci:

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

Vous pouvez le voir, il travaille à ce Plunker: http://plnkr.co/edit/GlHRLKECR4jeBS7Vf7TX?p=preview

OriginalL'auteur JayQuerie.com