使用复选框实现角度过滤器答案

【问题标题】：implement angular filter using checkbox使用复选框实现角度过滤器
【发布时间】：2017-08-16 08:32:12
【问题描述】：

我有一个仪表板列表 (vm.dashboards)，我想从中筛选出我创建的仪表板。默认情况下它显示整个列表，但是当我点击“显示我的仪表板”复选框时，它应该只显示我创建的仪表板列表。

HTML 代码：

<div>
          <input type="checkbox" ng-model="showMyDashboard" ng-value="vm.myDashboard" ng-checked="false" ng-true-value="1" ng-false-value="0"><span for="radio" style="margin-left:5px;" class="text-only">Show my dashboards</span>
        </div>

<ul ng-repeat="dashboard in vm.dashboards" class="list-group">
          <li class="list-group-item">
            <div class="row">
              <div class="col-sm-5"><a class="list-group-item-heading dashboard-heading">{{ dashboard.title }} </a>
                <p class="list-group-item-text dashboard-text">{{ dashboard.desc }}</p>
              </div></li>
    </ul>

现在棘手的部分是没有直接的方法来获取 myDashboards 列表。 If(currentUserId === dashboardOwnerId) 则该特定仪表板是 myDashboard。所以我必须在过滤器中应用条件。我尝试过这种方法：

ul.list-group(ng-repeat="dashboard in vm.dashboards | filter: dashboard.creator["@href"].split("/").pop() === vm.currentUSerID")

所以， dashboard.creator["@href"].split("/").pop() 将给出类似 1、101、123 的值。和 currentUserID 也会给出类似的值。当两者都匹配时，我得到了我创建的仪表板。

上面的这个过滤器与我想要的完全相反，它列出了所有不是我创建的仪表板。我可以给过滤器这样的条件吗？我需要为它构建自定义过滤器吗？任何帮助/建议将不胜感激。谢谢！

【问题讨论】：

请查看以下链接。 Link

标签： angularjs list checkbox angular-filters

【解决方案1】：

最简洁的方法是创建一个自定义过滤器并返回具有正确值的仪表板。

.filter("myDashboardFitler", function() {
            return function(input, currentUserId, checkedValue) {
                var owner = [];
                var i;

                angular.forEach(input, function(dashboard) {
                    if (checkedValue === "YES") {
                        if (dashboard.creator["@href"].split("/").pop() === currentUserId) {
                            owner.push(dashboard);
                        }
                    } else {
                        owner.push(dashboard);
                    }
                });
                return owner;
            };
        });

HTML 页面：

<input type="checkbox" ng-model="checkedValue" ng-true-value="'YES'" ng-false-value="'NO'" ng-change="myDashboardFilter()"><span for="radio" style="margin-left:5px;" class="text-only">Show only my dashboards</span>
<ul ng-repeat="dashboard in vm.dashboards | myDashboardFitler : vm.currentUserId : checkedValue" class="list-group">

我希望这对面临类似问题的人有所帮助。谢谢！

【讨论】：