我试图使用复选框以应用过滤器。
I am trying to apply a filter using checkboxes.
复选框被正确显示:
<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?
它看起来像您提供客户名单,而当一个或多个被选中,显示在同一个城市为这些客户的客户的表被选择
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>
您可以看到它在这个Plunker工作: http://plnkr.co/编辑/ GlHRLKECR4jeBS7Vf7TX?p = preVIEW
You can see it working at this Plunker: http://plnkr.co/edit/GlHRLKECR4jeBS7Vf7TX?p=preview
上一篇:knockout.js是在填补observableArray太慢是在、太慢、knockout、js
下一篇:创建AngularJS&放一个JSONP API;使用jQuery消费JSONP、AngularJS、jQuery、API