AngularJS 复选框过滤器 [英] AngularJS checkbox filter

查看:32
本文介绍了AngularJS 复选框过滤器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想过滤结果.

有一个葡萄酒列表,我的愿望是当没有选中复选框时,显示整个葡萄酒列表.

There is a list of wines, my wish is when no checkbox is checked, the entire list of wine is displayed.

  • 当仅选中 1 个复选框时,会显示相关类别
  • 当检查多个复选框时,相关类别显示

我是 AngularJS 的新手,我尝试使用 ng-model 没有成功,这里是没有与函数关联的 ng-model 的代码:

I'm a newbie to AngularJS, I tried with ng-model wihout success, here is the code without ng-model associated to the function:

<html ng-app="exampleApp">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>

    <script>
        angular.module("exampleApp", [])
                .controller("defaultCtrl", function ($scope) {
                    $scope.wines = [
                        { name: "Wine A", category: "red" },
                        { name: "Wine B", category: "red" },
                        { name: "wine C", category: "white" },
                        { name: "Wine D", category: "red" },
                        { name: "Wine E", category: "red" },
                        { name: "wine F", category: "white" },
                        { name: "wine G", category: "champagne"},
                        { name: "wine H", category: "champagne" }

                    ];


                    $scope.selectItems = function (item) {
                        return item.category == "red";
                    };

                    $scope.selectItems = function (item) {
                        return item.category == "white";
                    };

                    $scope.selectItems = function (item) {
                        return item.category == "champagne";
                    };
                });
    </script>
</head>
<body ng-controller="defaultCtrl">

<h4>red: <input type="checkbox"></h4>
<h4>white: <input type="checkbox"></h4>
<h4>champagne: <input type="checkbox"></h4>



            <div ng-repeat="w in wines | filter:selectItems">
                {{w.name}}
                {{w.category}}
            </div>


</body>
</html>

</html>

如何使用 ng-model 或 ng-change 将一个函数关联到每个复选框按钮上,从而有一个实时过滤模型??

解决方案

推荐答案

有几种可能的实现方式.这是一个:

  1. Have a $scope.filter = {} object to hold the state of each filter. E.g. {red: true, white: false...}.

  1. 有一个 $scope.filter = {} 对象来保存每个过滤器的状态.例如.{red: true, white: false...}.

Associate each checkbox with the corresponding property using ng-model. E.g.: input type="checkbox" ng-model="filter['red']" />.

使用 ng-model 将每个复选框与相应的属性相关联.例如:input type="checkbox" ng-model="filter['red']"/>.

Have a function (e.g. $scope.filterByCategory(wine)) that decides if a wine should be displayed or not (based on the $scope.filter object).

有一个函数(例如 $scope.filterByCategory(wine))来决定是否应该显示葡萄酒(基于 $scope.filter)> 对象).

Use that function to filter the items based on their category. E.g. <div ng-repeat="wine in wines | filter:filterByCategory">

使用该函数根据类别过滤项目.例如.


The filterByCategory function could be implemented like this:

<小时>

filterByCategory 函数可以这样实现:

function noFilter(filterObj) {
  return Object.
    keys(filterObj).
    every(function (key) { return !filterObj[key]; });
}

其中 noFilter() 是一个函数,用于检查是否有任何过滤器被激活(如果没有则返回 true):


See, also, this short demo.

UPDATE:

<小时>

另请参阅此简短演示..><小时>

更新:

我创建了一个修改版本,它支持多个过滤器(不仅仅是按类别过滤).
基本上,它动态检测可用属性(基于第一个 wine 元素),添加控件(复选框组)以根据每个属性应用过滤器,并具有自定义过滤器功能:>

  1. Filters each wine item, based on every property.
  2. If a property has no filter applied (i.e. no check-box checked), it is ignored.
  3. If a property has check-boxes checked, it is used for filtering out wine items (see above).
  4. There is code for applying multiple filters using AND (i.e. all properties must match) or OR (at least one property must match).
  1. 根据每个属性过滤每个 wine 项目.
  2. 如果一个属性没有应用过滤器(即没有选中复选框),它会被忽略.
  3. 如果属性已选中复选框,则用于过滤wine 项(见上文).
  4. 有一些代码可以使用 AND(即所有属性必须匹配)或 OR(至少一个属性必须匹配)来应用多个过滤器.


See, also, this updated demo.

这篇关于AngularJS 复选框过滤器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆