如何使用複選框來篩選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。