Simplify AngularJS ng-repeat looping inside HTML code -
i have below html code utilizes ng-repeat show data. data separated 2 columns, , each column have more or less same number of data (shown through links).
however, this, traversed through same set of data twice, 2 different ng-repeat conditions (with first traversal showing first set of data in first column, , second traversal showing second set of data in second column).
i believe redundant (and time consuming, too), because first traversal, first half of data skip rest (by ng-if), , second traversal, second half.
is there way traverse through data once, still being able show division of data?
note: i've tried putting ng-repeat before first < div class="column" >, , keep conditionals inside < >, happens < div class="column" > repeats, shouldn't case. want < > tags repeat in corresponding columns.
code
<div class="ui 2 column doubling stackable grid"> <div class="column"> <h5> <div ng-repeat="agency in agencies" ng-if="$index <= (agencies.length/2)"> <a href="agency.html#{{agency.url | num}}">{{agency.name}}</a><br> </div> </h5> </div> <div class="column"> <h5> <div ng-repeat="agency in agencies" ng-if="$index > (agencies.length/2)"> <a href="agency.html#{{agency.url | num}}">{{agency.name}}</a><br> </div> </h5> </div> </div>
my improvement use 'limitto' pipe, instead of ng-if.
look @ version, it's more efficient.
{{agfull = agencies.length; ""}} {{aghalf = agfull/2; ""}} <div class="ui 2 column doubling stackable grid"> <div class="column"> <h5> <div ng-repeat="agency in agencies | limitto : aghalf"> <a href="agency.html#{{agency.url | num}}">{{agency.name}}</a><br> </div> </h5> </div> <div class="column"> <h5> <div ng-repeat="agency in agencies | limitto : agfull : aghalf"> <a href="agency.html#{{agency.url | num}}">{{agency.name}}</a><br> </div> </h5> </div> </div> i recommend store agencies.length & agencies.length/2 in variable, did above. can use controller that, if don't template variables.
Comments
Post a Comment