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

查看:250
本文介绍了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-模型wihout成功,这里是code,无关联的功能NG-模式:

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>

如何使用NG-模型或NG-变化的函数每个复选框按钮关联有一个实时过滤模型??

How to use ng-model or ng-change to associate a function to each checkbox button to have a real time filtering model??

推荐答案

有多种实现成为可能。这里有一个:

There are several implementations possible. Here's one:


  1. 有一个 $ scope.filter = {} 对象来保存每个过滤器的状态。例如。 {红:真白:假的... ...}

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

使用 NG-模型的相应属性关联的每个复选框。例如:输入类型=复选框NG模型=过滤器['红']/方式&gt;

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

有一个函数(如 $ scope.filterByCategory(酒)),它决定一个葡萄酒应显示或不(根据 $ scope.filter 对象)。

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

使用该功能来筛选根据其类别的项目。例如。 &LT; D​​IV NG重复=W的葡萄酒|过滤器:filterByCategory&GT;

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

filterByCategory 功能,可以这样进行:


The filterByCategory function could be implemented like this:

$scope.filterByCategory = function (wine) {
    // Display the wine if
    return
        // the wine's category checkbox is checked (`filter[category]` is true)
        $scope.filter[wine.category] ||   // or 

        // no checkbox is checked (all `filter[...]` are false)
        noFilter($scope.filter);
};

其中, NOFILTER 是检查是否有激活的任何过滤(函数,返回真正如果没有):

where noFilter is a function that checks if there is any filter activated (and returns true if there is none):

function noFilter(filterObj) {
    for (var key in filterObj) {
        if (filterObj[key]) {
            // There is at least one checkbox checked
            return false;
        }
    }

    // No checkbox was found to be checked
    return true;
}


又见这个 短演示


See, also, this short demo.

更新

我创建了一个修改版本,支持多种滤镜(不只是按类别过滤)。结果
基本上,它可动态检测可用属性(基于第一葡萄酒元素),添加控件(中的复选框组),用于将基于每个属性过滤器,并配有定制过滤功能是:

I created a modified version, which supports multiple filters (not just filtering by category).
Basically, it dynamically detects the available properties (based on the first wine element), adds controls (groups of check-boxes) for applying filters based on each property and features a custom filter function that:


  1. 过滤器每个葡萄酒项目的基础上,每个属性。

  2. 如果某个属性没有应用的过滤器(即没有复选框选中),它将被忽略。

  3. 如果一个酒店入住箱子检查,它是用于过滤掉葡萄酒项目(见上文)。

  4. 有code使用AND(即所有属性必须匹配)或OR(至少一个属性muust匹配)应用多个过滤器。

  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 muust match).

又见这个 更新演示


See, also, this updated demo.

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

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