Angularjs ng-repeat iterate by 2

Question

I have a for loop in my MVC application like this

for(var i = 0; i < data.length; i +=2){
    <div class='@(i== 0? "item active": "item")'>
       <div>
          @Html.Raw(data[i].Description)
       </div>
       <div>
          @Html.Raw(data[i + 1].Description)
       </div>
    </div>
}

I want to convert the above code in angularjs.

Means every loop render the record from current and next array index, say i = 0 then render first and second record detail.

Actually it is big object, for clarity I reduce the code, I want to write the same code in ng-repeat

See the fiddle

so what is stopping you ? what is the question? someone with 6K rep should know better than to not ask specific question and provide more detailed problem statement — charlietfl, Sep 27 '16 at 23:59
Have you got your data in a javascript object somewhere? Do you have an angular-like setup in your project? — Stefan, Sep 28 '16 at 00:07
the fiddle you posted **is already** Angular.js. Does it not do what you expect? It's not really clear what you are trying to ask for here. — Claies, Sep 28 '16 at 01:00
I would mark this as a duplicate of http://stackoverflow.com/questions/20137496/angular-js-ng-repeat-for-creating-grid/25838091#25838091 or http://stackoverflow.com/questions/27211799/angular-ng-repeat-add-bootstrap-row-every-3-or-4-cols but I had previously marked the question as unclear. — Claies, Sep 28 '16 at 01:17

score 1 · Answer 1 · answered Sep 28 '16 at 01:10

1

I end up with a dirty trick:

<div ng-repeat="item in data" 
     ng-class="{active: $first}" class="item row" 
     ng-if='$index % 2 == 0'> 
      <div class='col-lg-6'>{{ item.a }}</div>
      <div class='col-lg-6'>{{ data[$index + 1].a }}</div> 
</div>

If $index % 2 == 0 only then render, means 0, 2, 4 .. it work as I want.

See to codepen.

answered Sep 28 '16 at 01:10

Ali Adravi

21,707
9
87
85

just a heads up on your solution; it will still output a `
` for each row, but the `ng-if` will cause some of those `
` elements to be empty. this **will** cause performance issues, and *might* cause display or CSS issues. This has been discussed extensively in other questions here, http://stackoverflow.com/questions/27211799/angular-ng-repeat-add-bootstrap-row-every-3-or-4-cols, http://stackoverflow.com/questions/20137496/angular-js-ng-repeat-for-creating-grid/25838091#25838091, and others...... this isn't a clean solution at all.
– Claies Sep 28 '16 at 01:16
isn't $even the same as $index % 2 == 0? – Fergus Sep 25 '18 at 23:58

matmo · Answer 2 · 2016-09-28T00:21:37.840

0

You essentially want something like this:

<div ng-repeat="dataEntry in data" ng-class="{active: $first}" class="item">
    <div>{{ dataEntry.Description }}</div>
    <div ng-if="!$last">{{ data[$index + 1].Description }}</div>
</div>

Use ng-repeat to loop over your data entries
Use ng-class to only apply 'active' class to the first entry (you have access to $first, $last, $even, and $odd, (which are booleans) inside of an ng-repeat scope)
dataEntry represents each entry for each iteration of your data. Use {{ }} to access and render it's contents
You can use $index + 1 to grab the next entry in the array of entries.

I would assume you know that data in this scenario has to be attached / accessible from your $scope.

edited Sep 28 '16 at 00:21

answered Sep 28 '16 at 00:10

matmo

1,339
12
17

See the fiddle at the end – Ali Adravi Sep 28 '16 at 00:21
Actually, you're going to end up with template-hackery this way. You're probably better of just creating the model you want in your controller, and then binding to that model in your template. – matmo Sep 28 '16 at 00:34
And if you really want to do this hackery (iterating by 2), you'd have to do something like `
{{ data[$index * 2].a }}
{{ data[$index * 2 + 1].a }}
` , and then throw an ng-if on your top-level div that tops out once $index is greater than the Math.floor($index/2), and Math isn't available in the template. – matmo Sep 28 '16 at 00:41
I tried with ng-if= '$index % 2 == 0' and ng-if= '$index % 2 > 1' but the problem is ng-repeater div always render, we cannot remove that one, thanks for your Ideas I am trying with some other logics – Ali Adravi Sep 28 '16 at 00:59

Angularjs ng-repeat iterate by 2

2 Answers2