如何在Angular中使用复选框来过滤结果
How to use checkbox to filter results with Angular?
我正在尝试使用复选框应用过滤器。
复选框正确显示:
<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>
表格显示了所有的顾客。
我想实现的是:当一个或多个复选框被选中时,表必须只显示与被选中的复选框的条件匹配的行。
我要怎么做才能让它工作?
你可以把一个函数传递给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;
}
}
};
}
如果您希望在启动时显示所有客户,只需使用customers
数组中的city
初始化$scope.search
。
这是一个普朗克的样本。
看起来您正在提供一个客户列表,当选择一个或多个客户时,显示一个与所选客户位于同一城市的客户表。
要做到这一点,您将需要一个自定义过滤器:// 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
相关文章:
- angular js多个复选框过滤多级JSON
- 根据复选框输入过滤深层对象
- 如何根据角度中的复选框选择过滤结果
- 多个复选框过滤,JavaScript和jQuery
- AngularJS复选框过滤在页面加载时不进行过滤
- jQuery Mobile-过滤复选框的列表视图会导致出现无样式的复选框
- 基于动态复选框过滤数据 角度 JS中的类别
- 使用复选框过滤 angularjs 中的数据,并在逗号分隔的列表中显示在文本框内
- 在 PHP 中使用多个复选框进行过滤
- 使用复选框按名称过滤传单标记
- AngularJS复选框过滤不起作用
- 使用AngularJS复选框过滤对象属性
- 使用复选框过滤数据- D3
- 使用复选框过滤D3.js
- JavaScript和复选框-过滤
- 使用jQuery同时使用文本框和复选框过滤数据
- 问:如何使用复选框过滤剑道网格数据
- Jquery同位素复选框过滤
- d3映射与复选框过滤
- 使用复选框过滤到新的对象数组 - javascript