Question

我是AngularJS的新手。当我检查相关的复选框时，我写了一个程序来过滤项目列表。但是我的CheckBoxes表现得像“Radio”按钮。无论如何，程序正在运行，但它不能使用多个复选框。请帮我。

我的计划@ http://plnkr.co/edit/iV7wyYoCNJdY1Ze7J6Pg?p=preview

Answer 1

简单方法

我会为两个复选框设置不同的模型，并添加过滤器，如：

<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 &nbsp;&nbsp;&nbsp;
        <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 &nbsp;&nbsp;&nbsp;
        <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 &nbsp;&nbsp;&nbsp;
 <input type="checkbox" inverted data-ng-model='types.double_suite'  /> Double suite

演示3 Plunker

Answer 2

如果像我一样，你并不熟悉自定义过滤器并且更喜欢更简单的解决方案，这里有一个简单的例子，用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>

Javscript函数：

 $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); }`;

Answer 3

这里是位精制过滤器（根据我的需要从@Maxim Shoustin编辑），您可以通过多个参数进行选择。如果你有3种类型，需要选择2中的3，你可以使用它，因为其他不起作用（试过自己）：

    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;
    };
});

使用angularJS中的多个复选框进行过滤

3 个答案:

简单方法

自定义过滤器##