在angularJS多个复选框过滤 [英] Filtering with multiple checkboxes in angularJS
问题描述
我是新来AngularJS。我写了一个程序来筛选项目列表当我检查相关的复选框。但在这里我的复选框被表现得像电台按钮。无论如何，程序工作，但它不与多个复选框工作。请帮帮我。
I'm new to AngularJS. I wrote a program to filter the Item list when i check related check boxes. But here my CheckBoxes are behaving like "Radio" buttons. Anyway, program is working but it is not working with multiple check boxes. Please help me.
我的计划@ <一个href=\"http://plnkr.co/edit/iV7wyYoCNJdY1Ze7J6Pg?p=$p$pview\">http://plnkr.co/edit/iV7wyYoCNJdY1Ze7J6Pg?p=$p$pview
推荐答案
我会设置不同的模型的两个复选框，并添加过滤器，如：
Easy way
I would Set different models for both check boxes and add filter like:
<body data-ng-controller="TestController">
<table id="hotels">
<tr>
<th>Hotel Name</th>
<th>Star Rating</th>
<th>Hotel type</th>
<th>Hotel Price</th>
</tr>
<tr data-ng-repeat="hotel in hotels | filter:search.type1 | filter:search.type2">
<td>{{hotel.name}}</td>
<td>{{hotel.star}}</td>
<td>{{hotel.type}}</td>
<td>{{hotel.price}}</td>
</tr>
</table>
<br/>
<h4>Filters</h4>
<input type="checkbox" data-ng-model='search.type1' data-ng-true-value='luxury' data-ng-false-value='' /> Luxury
<input type="checkbox" data-ng-model='search.type2' data-ng-true-value='double suite' data-ng-false-value='' /> Double suite
</body>
演示<大骨节病> Plunker
（<子>我喜欢更多）
我们可以绑定复选框一个对象，如：
We can bind the checkboxes to one object like:
$scope.types = {luxury: false, double_suite:false};
和创建像自定义过滤器后：
and after create custom filter like:
iApp.filter('myfilter', function() {
return function( items, types) {
var filtered = [];
angular.forEach(items, function(item) {
if(types.luxury == false && types.double_suite == false) {
filtered.push(item);
}
else if(types.luxury == true && types.double_suite == false && item.type == 'luxury'){
filtered.push(item);
}
else if(types.double_suite == true && types.luxury == false && item.type == 'double suite'){
filtered.push(item);
}
});
return filtered;
};
});
所以我们的HTML现在似乎很简单：
So our HTML now seems simple:
<body data-ng-controller="TestController">
<table id="hotels">
<tr>
<th>Hotel Name</th>
<th>Star Rating</th>
<th>Hotel type</th>
<th>Hotel Price</th>
</tr>
<tr data-ng-repeat="hotel in hotels | myfilter:types">
<td>{{hotel.name}}</td>
<td>{{hotel.star}}</td>
<td>{{hotel.type}}</td>
<td>{{hotel.price}}</td>
</tr>
</table>
<br/>
<h4>Filters</h4>
<input type="checkbox" data-ng-model='types.luxury' /> Luxury
<input type="checkbox" data-ng-model='types.double_suite' /> Double suite
<pre>{{types|json}}</pre>
</body>
演示2 <大骨节病> Plunker
如果您感兴趣的反转复选框过滤器，只需添加指令（从此处）
If you interesting to invert the check-box filter, just add directive (grabbed from HERE):
iApp.directive('inverted', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(val) { return !val; });
ngModel.$formatters.push(function(val) { return !val; });
}
};
});
播下新的HTML表单：
sow new HTML form:
<input type="checkbox" inverted data-ng-model='types.luxury' /> Luxury
<input type="checkbox" inverted data-ng-model='types.double_suite' /> Double suite
示范3 <大骨节病> Plunker
这篇关于在angularJS多个复选框过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
