AngularJS复选框

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

导读：我想过滤结果。有一个葡萄酒列表，我的愿望是没有复选框被检查，整个葡萄酒列表显示。当仅选中1个复选框时显示相关类别当选中多个复选框时，显示相关类别我是AngularJS的新手，我尝试用ng模型没有成功，这里是没有ng模型的代码与功能相关联： html ng-ap

我想过滤结果。

有一个葡萄酒列表，我的愿望是没有复选框被检查，整个葡萄酒列表显示。

>当仅选中1个复选框时显示相关类别
>当选中多个复选框时，显示相关类别

我是AngularJS的新手，我尝试用ng模型没有成功，这里是没有ng模型的代码与功能相关联：

<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",{ name: "wine C",category: "white" },{ name: "Wine D",{ name: "Wine E",{ name: "wine F",{ 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-model或ng-change将功能与每个复选框按钮相关联，以实现实时过滤模型？

有几个实现可能。这是一个：

>有一个$ scope.filter = {}对象来保存每个过滤器的状态。例如。 {red：true，white：false …}。
>使用ng-model将每个复选框与相应的属性相关联。例如：input type =“checkbox”ng-model =“filter [‘red’]”/&gt ;.
>有一个函数(例如$ scope.filterByCategory(wine))来决定是否应该显示葡萄酒(基于$ scope.filter对象)。
>使用该功能根据其类别过滤项目。例如。 < divng-repeat =“葡萄酒中的葡萄酒| filter：filterByCategory”>

filterByCategory函数可以这样实现：

function filterByCategory(wine) {
  // Display the wine if
  var displayWine =
      // 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);

  return displayWine;
};

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

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

另见这个short demo。

更新：

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

>根据每个物业过滤每个酒单。
>如果一个属性没有应用过滤器(即没有检查复选框)，它将被忽略。
>如果某个物业已经勾选了复选框，则用于过滤葡萄酒(见上文)。
>有使用AND应用多个过滤器的代码(即所有属性必须匹配)或OR(至少一个属性必须匹配)。

另见这个updated demo。

（编辑：李大同）

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