Наиболее эффективный способ, чтобы скрыть столбец таблицы с angularjs

Question

Я хотел бы знать, если кто-нибудь знает более эффективный способ, чтобы показать/скрыть столбцы в таблице питания от angularjs:

У меня есть большой стол (20+ столбцов, 1000000+ строк) и реализована функция отображения/скрытия столбцов на основе пользовательских настроек. Я делаю это через ng-if на каждую ячейку таблицы. Это вызывает большое количество наблюдателей при начальной загрузке таблицы, а цикл углового дайджеста сходит с ума с более 4000 наблюдателей на одной странице.

Моя основная идея - решить проблемы с производительностью, чтобы уменьшить количество наблюдателей. Для этого я использую библиотеку this, которая ничего не делает, а затем отключает наблюдателей, которых нет в области просмотра. Пока все хорошо, производительность улучшилась, но что, если я добавлю все больше и больше функций в таблицу? Похоже, что эта функция show/hide columns будет моим узким местом производительности навсегда (и в соответствии с хромометрическими анализами таймингов).

Заключение: ng-if не похож на хороший подход к отображению/скрытию столбцов из-за большого количества наблюдателей и плохой производительности. Кто-нибудь знает более разумное решение для показа/скрытия столбцов?

Редактирование: у меня уже есть разбиение на страницы по 200 строк на страницу, однако проблема все еще сохраняется и, конечно же, я нацелен на масштабируемое решение.

Answer 1

Вы можете попробовать классы CSS, применяемые ко всем ячейкам таблицы и соответствующим ячейкам заголовка с разными именами классов.

EG: колонок-1, колонок 2 ЭСТ

Определить определение классов в угловой строке и поместить между стилем тегом как выражение

EG:

В контроллерах JS

$scope.columnStyleDefs = '.column-1{display:none},.column-1{display:table-cell},...'; 

Вы можете chanage "columnStyleDefs" при необходимости, когда пользователь меняет свои предпочтения

В шаблоне HTML

<style> 
{{columnStyleDefs}} 
</style> 

я дома это может помочь вам для вышеуказанного задания.