我是AngularJS的新手.当我检查相关的复选框时,我写了一个程序来过滤项目列表.但是我的CheckBoxes表现得像“Radio”按钮.无论如何,程序正在运行但它不能使用多个复选框.请帮我.
我的计划@ http://plnkr.co/edit/iV7wyYoCNJdY1Ze7J6Pg?p=preview
简单的方法
我会为两个复选框设置不同的模型,并添加过滤器,如：
<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
自定义过滤器##
(我更喜欢)
我们可以将复选框绑定到一个对象,如：
$scope.types = {luxury: false,double_suite:false};
并在创建自定义过滤器之后：
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现在看起来很简单
<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
[编辑@Mike]
如果您有兴趣反转复选框过滤器,只需添加指令(从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表格：
<input type="checkBox" inverted data-ng-model='types.luxury' /> Luxury <input type="checkBox" inverted data-ng-model='types.double_suite' /> Double suite
演示3 Plunker