javascript - 通过 Angular 中的一组复选框控制显示的项目

Question

我有一个映射到复选框的标签列表。在同一个 Controller 中，有一个包含其中一些标签的项目列表。带有选中标签的项目应该是可见的。

Here is a plunkr使用代码设置。我想不通的是如何通过事件(选中)标签过滤 $scope.items。我尝试了几种不同的方法，但对 Angular 非常陌生，我需要朝正确的方向插入。我想 $scope.items 应该观察 $scope.tags 并以某种方式过滤每个标签的 active 属性。

Answer 1

查看 Creating Custom Filters .

在您的模块中定义一个自定义过滤器:

angular
  .module('myApp', [])
  .filter('withActiveTags', ActiveTagsFilter)
  .controller('TestController', TestController);

function ActiveTagsFilter() {
  return function (items, tags) {
    var filteredItems = [];
    angular.forEach(items, function (item) {
      if (/* tags contains an active tag that's in item.tags */) {
        filteredItems.push(item);
      }
    });
    return filteredItems;
  };
}

function TestController() {
  // controller stuff
}

然后在你的 View 中写这样的东西:

<ul>
  <li ng-repeat="item in items | withActiveTags:tags">{{ item.name }}</li>
</ul>

现在只需找出进行过滤的最佳方法，一切就绪。这是一个 plunker示例减去过滤。我确实创建了一个“样本过滤器”来证明该过滤器确实有效。