7

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

我的程序@http: //plnkr.co/edit/iV7wyYoCNJdY1Ze7J6Pg?p=preview

4

3 回答 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 &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>

演示 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 &nbsp;&nbsp;&nbsp;
 <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 回答