Hea*_*man 7 angularjs angularjs-ng-repeat
我是AngularJS的新手.当我检查相关的复选框时,我写了一个程序来过滤项目列表.但是我的CheckBoxes表现得像"Radio"按钮.无论如何,程序正在运行,但它不能使用多个复选框.请帮我.
Max*_*tin 23
我会为两个复选框设置不同的模型,并添加过滤器,如:
<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]
如果您有兴趣反转复选框过滤器,只需添加指令(从此处抓取):
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
| 归档时间： |
|
| 查看次数： |
32533 次 |
| 最近记录： |