javascript - ng-repeat with includes: best performant way? -

i facing performance issue angular (ionic), , i'd know performant way solve problem.

i list of objects service have show in app:

  $scope.objectlist = [     {        id: 123456,        name: "abcdefg",        state: [1|2|3|4|5|6|7|8...],        ....     },     ....   ]; 

the list won't never have more 20-25 objects.

the problem elements in list, although of same type, have shown in quite different way. have different template each posible state object can in.

i using ng-repeat way show list. list won't change can use 1 way binding.

<div ng-repeat="obj in ::objectlist track obj.id">    ....     </div> 

inside ng-repeat have include presentation template of each object, changes depending on object state.

i have tried different solutions don'f find 1 improves substantialy rendering performance.

for example, i've tried i'm not sure binding function ng-include performant.

html:

<div ng-repeat="obj in ::objects track 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";     }     .... }; 

any suggestion of how deal problem? whicch best way include different templates in same list?

do have use 1 way binding notation(::) in included templates or it's enough 1 used in ng-repeat?

thanks in advance

i haven't used one-way binding template syntax (::) won't speak that. based on comments , original question, think best approach along these lines:

• create single item renderer template process repeater items
• continue use track by syntax in repeater in order recycle item renderers

• based on item's type, use combination of ng-show & ng-hide display correct children nested in template.

  <!-- item renderer template.html --> <div>    <div ng-show="item.type == 'foo'"></div>     <div ng-show="item.type == 'bar'"></div>     <div ng-show="item.type == 'baz'"></div> </div> 

creating single template combined track by in repeater reuse dom elements, negating need pull them dom , insert new ones.

using ng-show or ng-hide vs. ng-if based on same idea above. toggling visibility of dom elements rather destroying/creating them.

the reason argue in performance-related tweaking, reusing or recycling objects faster destroying , recreating new objects. true of javascript, , while i've yet test theory in dom manipulation, bet true. i'm making educated guess since using ionic framework, should benefit mobile performance well,

just keep in mind, given various permutations of showing , number of rows of data, might see marginal performance gains. depending on number of bindings inside template, might reach point performance penalty angular's digest cycle complete same performance gains recycling dom elements.