angularjs - ng-repeat + ng-switch: how to use correctly? -

angularjs - ng-repeat + ng-switch: how to use correctly? -

premise: i've seen several similar questions. can't figure out how solve doubt.

i have array of objects:

$scope.messages = [obj1, obj2, ...];

where each object has next structure:

{ id: <int>, printonlyfirst: <boolean>, text1: <string>, text2: <string> }

where text1 / text2 conditionally printed (in real time through track by) according printonlyfirst.

<div id="container"> <div ng-switch="printonlyfirst" ng-repeat="message in messages track message.id"> <div ng-switch-when="true" class="text1"> <!-- case 1 --> {{message.text1} </div> <div ng-switch-when="false" class="text2"> <!-- case 2 --> {{message.text2} </div> </div> </div>

i think code fine.

however noticed

<div ng-switch="printonlyfirst" ng-repeat="message in messages track message.id">

is printed each single element of ng-repeat loop, it's content (either case 1 or 2).

is normal? there improve solution avoid such dom overhead?

from https://docs.angularjs.org/api/ng/service/$compile#-priority-:

directives greater numerical priority compiled first.

ngswitch executes @ priority 1200 while ngrepeat executes @ priority 1000, isn't order need.

you'll have utilize nested component (a div example):

class="lang-html prettyprint-override"><div id="container"> <div ng-repeat="message in messages track message.id"> <div ng-switch="message.printonlyfirst"> <div ng-switch-when="true" class="text1"> <!-- case 1 --> {{message.text1} </div> <div ng-switch-when="false" class="text2"> <!-- case 2 --> {{message.text2} </div> </div> </div> </div>

don't forget switch on message.printonlyfirst rather printonlyfirst.

angularjs angularjs-ng-repeat