通过过滤在AngularJS中隐藏子类别

Hiding a sub category in AngularJS with filtering

本文关键字:隐藏 子类 AngularJS 过滤      更新时间:2023-09-26

我有一个内容列表,它有两个级别。我的数据已经排序了,所以我只需要遍历它来显示它。这里是

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个控制器?)如果我在push 'search'时调用的方法上设置一个断点,那么集合又都是空的。因此,我尝试添加过滤器,但如果添加ng-hide,列表永远不会显示,因为集合总是空的,尽管它在搜索发生时填充。

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

好的,我整理好了。Angular在每个作用域的层次上维护变量,所以子作用域会继承一个值,但如果你在子作用域层次上改变了它,父作用域也不会改变,除非你使用了$scope.$parent。随着我对Angular的了解越来越多,我的项目也在不断发展。我并没有意识到在数据项的点上有两个嵌套的作用域。所以,我需要改变$scope。$parent,到$scope.$parent。父母,一切都很好。现在我只需要弄清楚为什么它这么慢.....