Simplify AngularJS ng-repeat looping inside HTML code

Question

I have below an HTML code which utilizes ng-repeat to show data. The data is separated to two columns, and each column will have more or less the same number of data (shown through links).

However, to do this, I traversed through the same set of data twice, with two different ng-repeat conditions (with the first traversal showing the first set of data in the first column, and the second traversal showing the second set of data in the second column).

I believe this is really redundant (and time consuming, too), because for the first traversal, I get the first half of the data then skip the rest (by ng-if), and for the second traversal, I get the second half.

Is there a way to traverse through the data just once, but still being able to show the division of data?

Note: I've tried putting ng-repeat before the first < div class="column" >, and keep the conditionals inside < a >, but what happens is that even the < div class="column" > repeats, which shouldn't be the case. I just want the < a > tags to repeat in their corresponding columns.

Code

<div class="ui two 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>

plvice · Accepted Answer · 2017-08-21 11:31:43Z

1

My improvement is to use 'limitTo' pipe, instead of ng-if.

Look at this version, it's more efficient.

{{agFull = agencies.length; ""}}

{{agHalf = agFull/2; ""}}

<div class="ui two 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 would also recommend to store agencies.length & agencies.length/2 in a variable, as I did above. You can also use the controller for that, if you don't like template variables.

answered Aug 21, 2017 at 11:31

plvice

4582 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

limciana Over a year ago

is there a way to round up agFull/2? Since this has two columns, if the length of agencies is odd, I want the left side of the column to have more agencies that the right. So if the length is three, I want the first half to have 2, then the other half to have 1.

limciana Over a year ago

oh wait. I got it! I found that AngularJS has Math.round function.

heysulo · Accepted Answer · 2017-08-21 11:47:26Z

0

Since you are looking to optimize, i suggest that you split your array in to two in the controller. This will remove the redundancy. Don't let your view to the the controller's work.

<div class="ui two column doubling stackable grid">
<div class="column">
    <h5>
    <div ng-repeat="agency in agencies[0]" >
        <a href="agency.html#{{agency.url | num}}">{{agency.name}}</a><br>
    </div>
    </h5>
</div>

<div class="column">
    <h5>
    <div ng-repeat="agency in agencies[1]">
        <a href="agency.html#{{agency.url | num}}">{{agency.name}}</a><br>              
    </div>
    </h5>
</div>

answered Aug 21, 2017 at 11:47

heysulo

1823 silver badges15 bronze badges

Collectives™ on Stack Overflow

Simplify AngularJS ng-repeat looping inside HTML code

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related