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
– charlietfl, Commented Sep 27, 2016 at 23:59
Have you got your data in a javascript object somewhere? Do you have an angular-like setup in your project? — Stefan
– Stefan, Commented Sep 28, 2016 at 0: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
– Claies, Commented Sep 28, 2016 at 1:00

Ali Adravi · Accepted Answer · 2016-09-28 01:10:16Z

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, 2016 at 1:10

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

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

2 Comments

Claies Over a year ago

just a heads up on your solution; it will still output a <div> for each row, but the ng-if will cause some of those <div> 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, stackoverflow.com/questions/27211799/…, stackoverflow.com/questions/20137496/…, and others...... this isn't a clean solution at all.

Fergus Over a year ago

isn't $even the same as $index % 2 == 0?

matmo · Accepted Answer · 2016-09-28 00:21:37Z

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, 2016 at 0:21

answered Sep 28, 2016 at 0:10

matmo

1,39912 silver badges17 bronze badges

4 Comments

Ali Adravi Over a year ago

See the fiddle at the end

matmo Over a year ago

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 Over a year ago

And if you really want to do this hackery (iterating by 2), you'd have to do something like <div>{{ data[$index * 2].a }}</div><div>{{ data[$index * 2 + 1].a }}</div> , 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.

Ali Adravi Over a year ago

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

Collectives™ on Stack Overflow

Angularjs ng-repeat iterate by 2

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related