Я столкнулся с проблемой производительности с Angular (Ionic), и я хотел бы знать, какой из способов решения этой проблемы будет наиболее эффективным.
Я получаю список объектов из службы, которые я должен показать в своем приложении:
$scope.objectList = [
{
id: 123456,
name: "abcdefg",
state: [1|2|3|4|5|6|7|8...],
....
},
....
];
В списке никогда не будет больше 20-25 объектов.
Проблема в том, что элементы в списке, хотя и одного типа, должны отображаться совершенно по-разному. У меня есть разные шаблоны для каждого возможного состояния, в котором может находиться объект.
Я использую ng-repeat таким образом, чтобы показать список. Список не изменится, поэтому я могу использовать одностороннюю привязку.
<div ng-repeat="obj in ::objectList track by obj.id">
....
</div>
Внутри этого ng-repeat я должен включить шаблон представления каждого объекта, который меняется в зависимости от состояния объекта.
Я пробовал разные решения, но не нашел того, который существенно улучшает производительность рендеринга.
Например, я пробовал это, но я не уверен, что привязка функции к ng-include очень эффективна.
HTML:
<div ng-repeat="obj in ::objects track by obj.id">
<div ng-include="getTemplateToInclude(obj)"></div>
</div>
JS:
$scope.getTemplateToInclude = function(obj){
if(obj.state === 1){
return "tmpls/template-a.html";
}else if(obj.state === 2){
return "tmpls/template-b.html";
}
....
};
Любое предложение о том, как справиться с этой проблемой? Какой лучший способ включить эти разные шаблоны в один список?
Должен ли я использовать нотацию односторонней привязки (::) во включенных шаблонах или достаточно того, что используется в ng-repeat?
заранее спасибо