Скрытие подкатегории в AngularJS с фильтрацией

#javascript #angularjs

#javascript #angularjs

Вопрос:

У меня есть список контента, он состоит из двух уровней. Мои данные отсортированы, поэтому я просто перебираю их, чтобы показать. Итак, у меня есть это

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

и так далее. У меня также есть текстовый фильтр, так что вы можете вводить текстовые и мои фильтры списка содержимого на основе заголовков и тегов. Все это работает нормально. Что я хочу сделать, так это скрыть подкатегорию 1 в категории 2, если Item9 и Item10 исключены фильтром. У меня есть 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, я вижу, что количество элементов в моей коллекции растет. Но инспектор Angular в Chrome зависает (возможно, потому, что у меня 2500 контроллеров? ) и если я установлю точку останова для метода, вызываемого при нажатии кнопки «поиск», все коллекции снова будут пустыми. Итак, я попытался добавить фильтры, но списки никогда не отображаются, если я добавляю ng-hide, потому что коллекция всегда пуста, хотя она заполняется по мере выполнения поиска.

Я использую $parent , потому что у каждого элемента есть свой собственный контроллер, и я подумал, что если вы измените родительский элемент, вы получите локальную копию. Итак, это явно работает, но значения исчезают, когда поиск заканчивается, и я не знаю почему.

Спасибо, что посмотрели

Комментарии:

1. Что, если бы я должен был создать службу, которая хранит эти данные, и внедрить ее в оба контроллера, поможет ли это мне?

Ответ №1:

Хорошо, я с этим разобрался. Angular поддерживает переменные на уровне каждой области, поэтому дочерняя область наследует значение, но если вы измените его на дочернем уровне, родительская категория останется неизменной, если вы не используете $scope.$parent . Мой проект развивался по мере того, как я все больше узнавал об Angular. Я не совсем понимал, что у меня есть две вложенные области в точке расположения моих элементов данных. Итак, мне нужно было изменить $scope.$parent на $scope.$parent. $parent, и все было хорошо. Теперь мне просто нужно разобраться, почему это происходит так медленно…..