Как использовать флажок, чтобы фильтровать результаты с помощью 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

Похоже, что вы предоставляете список клиентов, и когда выбран один или несколько, отобразите таблицу клиентов, которые находятся в том же городе, что и выбранные клиенты.

Для этого вам потребуется пользовательский фильтр:

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

Ваша разметка будет изменить во что-то вроде этого:

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

Вы можете видеть, что работает в этом Plunker: http://plnkr.co/edit/GlHRLKECR4jeBS7Vf7TX?p=preview

Answer 2

Вы можете передать функцию в фильтр 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 с city от customers.

Here is a sample Plunker.