通过过滤隐藏AngularJS中的子类别答案

【问题标题】：Hiding a sub category in AngularJS with filtering通过过滤隐藏AngularJS中的子类别
【发布时间】：2014-06-23 11:32:56
【问题描述】：

我有一个内容列表，它有两个级别。我的数据已排序，因此我只需对其进行迭代以显示它。所以我有这个

Category 1
  Subcategory1
     Item1
     Item2
  Subcategory2
     Item3
     Item4
  Subcategory3
     Item5
     Item6
  Subcategory4
     Item7
     Item8
Category 2
  Subcategory1
     Item9
     Item10
  Subcategory2
     Item11
     Item12

等等。我还有一个文本过滤器，因此您可以根据标题和标签输入文本和我的内容列表过滤器。这一切都很好。如果过滤器排除了 Item9 和 Item10，我想要做的是隐藏类别 2 中的子类别 1。我有 2500 个项目，它已经有点慢了。我不想再次计算项目，而是想在它们被过滤时对它们进行计数。这意味着当过滤器启动时，我需要重置我的列表，然后将其计为找到项目。我有两个控制器，父级中有文本框，子级用于每个项目，因为我读过它比使用过滤器更快（因为过滤器会从 DOM 中删除东西）。我仍然不确定这是不是真的，我正在尝试。同时，这是在父控制器中：

$scope.doFilter = function()
{
    for (var c = 0; c < $scope.categories.length; ++c)
    {
        var categoryId = $scope.categories[c].Id;


        for (var r = 0; r < $scope.regions.length; ++r)
        {
            var regionId = $scope.regions[r].Id;
            $scope.showRegions[String(categoryId) + String(regionId)] = 0;
        }
    }


    $scope.$broadcast("triggerFilters", {});
}

然后这是我在子控制器中搜索方法的底部：

    if (!excluded)
    {
        var key = String($scope.item.CategoryId) + String($scope.region.Id);

        if ($scope.$parent.showRegions[key] == null)
            $scope.$parent.showRegions[key] = 0;

        $scope.$parent.showRegions[key]++;
    }

记住，这个子控制器有一个实例，对于每个元素，它是这样的（这是一个缩减版，为了便于阅读）：

<div data-ng-repeat="category in fullList">
        <a>{{category.Name}}</a>
        <div >
            <div data-ng-repeat="region in regions | orderBy: 'Name'">
                {{region.Name}}
                <div >
                    <ul>
                        <li  ng-controller="filterController" ng-hide="isExcludedByFilter"
                            data-ng-repeat="item in category.regions[region.Name].items | orderBy: 'Name'">
                            {{item.Name}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

因此，当我在 Chrome 中设置断点时，我可以看到我收集的项目数量正在增加。但是 Chrome 中的 Angular 检查器冻结（可能是因为我有 2500 个控制器？），如果我在推送“搜索”时调用的方法上设置断点，那么集合又是空的。因此，我尝试添加过滤器，但如果我添加 ng-hide，列表永远不会显示，因为集合始终是空的，尽管它会在搜索发生时填满。

我正在使用 $parent，因为每个项目都有它自己的控制器，我认为如果你修改一个父项目，你会得到一个本地副本。所以，这显然是有效的，但是当搜索结束时这些值正在消失，我不知道为什么。

感谢观看

【问题讨论】：

如果我要创建一个服务来保存这些数据，并将其注入两个控制器，这对我有帮助吗？

标签： javascript angularjs

【解决方案1】：

好的 - 我解决了这个问题。 Angular 在每个作用域的级别维护变量，因此子作用域会继承一个值，但是如果您在子级别更改它，则父作用域不会更改，除非您使用 $scope.$parent。随着我对 Angular 的了解越来越多，我的项目也在不断发展。我没有意识到我的数据项有两个嵌套范围。所以，我需要将 $scope.$parent 更改为 $scope.$parent.$parent，一切都很好。现在我只需要弄清楚为什么它这么慢.....

【讨论】：