我是 AngularJS 的新手。当我选中相关复选框时，我编写了一个程序来过滤项目列表。但在这里我的复选框表现得像“单选”按钮。无论如何，程序正在运行，但它不能与多个复选框一起使用。请帮我。
问问题
34051 次
3 回答
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>
演示 2Plunker
[编辑@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
演示 3Plunker
于 2013-11-04T13:08:53.617 回答
1
如果像我一样，您不是很熟悉自定义过滤器并且更喜欢更简单的解决方案，这里是一个简单的示例，用于将数据与 ng-repeat 中的复选框的 ng-model 绑定：tutorial here
这是 ng-value-true 和 ng-value-false 的一个很好的例子：
<div ng-repeat="fruit in fruits">
<input type="checkbox" ng-model="fruit.name" ng-true-value="{{fruit.name}}" ng-false-value="{{fruit-name}} - unchecked" ng-change="filterMultipleSystem()"/><br/>
</div>
Javascript函数：
$scope.filterMultipleSystem = function(){
setTimeout(function () {
var x = document.getElementsByClassName("firstLoop");
var i; for (i = 0; i < x.length; i++) {
if(x[i].title.indexOf("unchecked")!==-1){
x[i].style.display = "none";
}
else
x[i].style.display = "inherit"; }},10); }`;
于 2014-08-27T13:41:10.990 回答
0
这是位精炼过滤器（根据我的需要从@Maxim Shoustin 编辑），您可以在其中通过多个参数进行选择。如果你有 3 种类型并且需要选择 3 种中的 2 种，你可以使用这个，因为其他的不起作用（我自己试过）：
app.filter('myfilter', function () {
return function (items, types) {
var filtered = [];
for (var i in items)
{
if (types.found == true && items[i].type == 'Found') {
filtered.push(items[i]);
}
else if (types.notfound == true && items[i].type == 'Not found') {
filtered.push(items[i]);
}
else if (types.moved == true && items[i].type == 'Moved') {
filtered.push(items[i]);
}
}
return filtered;
};
});
于 2014-08-01T08:24:26.443 回答