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

发布时间：2020-12-17 07:22:57 所属栏目：安全来源：网络整理

导读：我是AngularJS的新手.当我检查相关的复选框时,我写了一个程序来过滤项目列表.但是我的CheckBoxes表现得像“Radio”按钮.无论如何,程序正在运行但它不能使用多个复选框.请帮我. 我的计划@ http://plnkr.co/edit/iV7wyYoCNJdY1Ze7J6Pg?p=preview 简单的方法我

我是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 &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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!