Повышение угловых характеристик в пользовательском раскрывающемся меню с функцией фильтрации с односторонним связыванием

0

У меня есть настраиваемый угловой компонент, который работает как элемент выпадающего списка с функцией фильтрации. Вход представляет собой базовый элемент ввода с несколькими угловыми директивами:

 <input type="text" class="form-control" ng-change="ctrl.filterTextChangeLocal($event)" ng-model="ctrl.ngModelValue" ng-click="ctrl.openDropdown($event)" />

Вышеуказанный вход отвечает за открытие раскрывающегося списка и позволяет пользователю вводить данные, так как пользователь вводит данные в выпадающем элементе, соответственно фильтруется. Фильтрация выполняется в контроллере с основным угловым фильтром:

 ctrl.filteredItems = ctrl.$filter("filter")(ctrl.items, ctrl.ngModelValue);

Выпадающий элемент выглядит следующим образом:

 <table class="table">
        <thead>
            <tr>
                <th ng-repeat="heading in ctrl.gridColumnHeaders" class="text-center">{{heading}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in ctrl.filteredItems" ng-mousedown="ctrl.onSelectedLocal(row, $event)">
                <td ng-repeat="value in ctrl.sort(row) track by $index" class="text-center">
                    {{value}}
                </td>
            </tr>
        </tbody>
    </table>

Все работает нормально, но по мере того, как количество элементов, передаваемых в компонент, увеличивается (100+), и соответственно увеличивается выпадающее меню, фильтрация идет медленно. Смысл, когда я набираю символ, фильтрация выпадающего отставания отстает.

Я понимаю, что угловые фильтры не самые лучшие, но я считаю, что большая часть отставания происходит от ng-repeat и двусторонней привязки. Я не могу создать одностороннюю привязку внутри самого ng-repeat так:

  ng-repeat="value in ::ctrl.filteredItems" 

потому что я теряю привязку для фильтрации. Просто установит одностороннюю привязку к производительности увеличения стоимости:

  {{::value}}

Или какой лучший способ увеличить производительность здесь? На самом деле нужно попытаться остаться в Ракурсе с угловыми углами, так что ищите Угловое решение.

благодаря

Теги:
angularjs-directive
angularjs-ng-repeat

1 ответ

0

Вы пытались просто применить:

one-time-binding="true"

непосредственно на ng-повторе?

Обычно двусторонняя привязка к элементам 100+ не должна ухудшать производительность, но если у вас есть вложенный цикл внутри вашего цикла, тогда..

  • 0
    Спасибо Reto .. что ты имеешь в виду прямо на нг-повтор? Внутри элемента "tr"? Я пытался сделать "item in :: ctrl.filteredItems", который должен делать то же самое, не так ли? Это теряет привязку для фильтрации, которая мне нужна.
  • 1
    Хорошо, тогда поместите это, по крайней мере, во вложенный цикл и повторите в элементе th . Проблема заключается в большом количестве наблюдателей, которые создаются для двухсторонних привязок. Есть ли у ваших предметов уникальные свойства, которые вы могли бы использовать вместо их индекса?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню