Question

我有一个仪表板（vm.dashboards）列表，我希望过滤掉我创建的仪表板。默认情况下，它显示整个列表，但是当我点击“显示我的仪表板”复选框时，它应该只显示由我创建的dashbaords列表。

HTML code：

<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列表的方法。如果（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也会给出类似的值。当我得到我创建的仪表板时，两者都匹配。

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

Answer 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">

我希望这可以帮助面临类似问题的人。谢谢！

使用复选框

1 个答案: