Question

我有一个映射到复选框的标签列表。在同一个控制器中，有一个包含这些标签的项目列表。具有已检查标签的项目应该是可见的。

使用代码设置

Here is a plunkr。我无法弄清楚的是如何通过活动（已选中）标记过滤$scope.items。我尝试了几种不同的方法，但对角度来说非常新，我需要向正确的方向推进。我想$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
}

然后在你的视图中写下这样的内容：

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

现在只需找出进行过滤的最佳方法，您就可以完成所有设置。这是一个plunker示例减去过滤。我确实创建了一个＆＃39;样本过滤器＆＃39;证明过滤器确实有效。

Answer 2

您还可以使用此处实施的常规filter directive with a custom功能：http://plnkr.co/edit/dCJ3kfnIaFcpkgIuIpRT?p=preview

查看更改：

<li ng-repeat="item in items | filter:tagSelected">

控制器更改：

$scope.tagSelected = function(item) {
  for(var i = 0, l = $scope.tags.length; i < l; i++) {
    var t = $scope.tags[i];

    for(var j = 0, k = item.tags.length; j < k; j++) {
      if(item.tags[j] == t.name && t.active) {
        return true;
      }
    }
  }
  return false;
};

Answer 3

或略有不同的解决方案http://plnkr.co/edit/GSm64d8pmYorcU3wrXCt?p=preview

 <li ng-repeat="item in items |  selectedTags : tags ">

JS：

.filter('selectedTags', function() {
  return function(items, tags) {

    var filtered = [];

    tags.forEach(function(tag) {

      if (tag.active === true) {


        items.forEach(function(item) {
          {

            if (item.tags.indexOf(tag.name) > -1) {


              if (filtered.indexOf(item) == -1) {
                filtered.push(item);
              }

            }
          }
        })
      }

    });

    return filtered;

  };
})

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

3 个答案: