AngularJs ng-repeat change loop increment

Question

I'm newbie to AngularJs. I want to use ng-repeat as for(i=0; i < ele.length; i+=2)

I have a table with 4 columns, where I'm going to use ng-repeat

<table>
<tr ng-repeat="i in elements">
   <th>{{i.T}}</th>
   <td>{{i.V}}</td>
   <th>{{elements[($index+1)].T}}</th> <!-- This should be next element of the elements array -->
   <td>{{elements[($index+1)].V}}</td> <!-- This should be next element of the elements array -->
</tr>
</table>

I need to access 2 elements in a single iteration and iteration increment should be 2

I hope this make sense. Please help me.

Please check this html view Plunker

@ArunPJohny, you mean rearrange the elements of the array?. I'm getting that array from a API request and use it many other places. So have few issues when modifying for ng-repeat — Gihan
– Gihan, Commented Feb 27, 2013 at 13:22
You should still change the model, even if it's coming from an API. You just need to convert it to what you need before passing it to the $scope. It would make more sense. — plus-
– plus-, Commented Feb 27, 2013 at 13:28
@G45 even if the data is from an API, once you fetch the data from the external source you can make changes — Arun P Johny
– Arun P Johny, Commented Feb 27, 2013 at 13:44

Mathew Berg · Accepted Answer · 2013-02-28 16:08:07Z

4

You can create a filter that creates an even copy of the array:

.filter("myFilter", function(){
    return function(input, test){
        var newArray = [];
        for(var x = 0; x < input.length; x+=2){
             newArray.push(input[x]);   
        }
        return newArray;
    }
});

JsFiddle: http://jsfiddle.net/gwfPh/15/

edited Feb 28, 2013 at 16:08

answered Feb 27, 2013 at 16:28

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

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

2 Comments

Gihan Over a year ago

Thanks @Mathew, It is not working accurately. If you can see in your JsFiddle example's resulting view, the 2nd row is wrong. Other that it is ok. I tried to figure out what is the glitch there but no luck.

Eno Over a year ago

What about edge cases? i.e. when input is empty array or length is an odd number

Sebastien Windal · Accepted Answer · 2013-02-27 14:28:55Z

1

So if I understand correctly you want to walk your list and alternate th and td's while iterating. If so you could use a ng-switch:

<table>
  <tr ng-repeat="i in elements" ng-switch on="$index % 2">
    <th ng-switch-when="0">{{i.T}}</th> 
    <td ng-switch-when="1">{{i.V}}</td>    
  </tr>
</table>

See Plunker here

answered Feb 27, 2013 at 14:28

Sebastien Windal

1,41413 silver badges12 bronze badges

1 Comment

Gihan Over a year ago

Thanks @Sebastien But my requirement is bit different. Please check this Plunker plnkr.co/edit/PSwPWqKwqp0vzFJTO8eh?p=preview. This should be my resulting view.

Arun P Johny · Accepted Answer · 2013-02-27 15:28:32Z

One solution I can think of involves a change in the data model

Template

<table ng-app="test-app" ng-controller="TestCtrl">
<tr ng-repeat="i in items">

   <th>{{i.T1}}</th>
   <td>{{i.V1}}</td>
   <th>{{i.T2}}</th>
   <td>{{i.V2}}</td>
</tr>
</table>

Controller

testApp.controller('TestCtrl', ['$scope', function($scope) {
    var elements=[]; //This is the dynamic values loaded from server
    for (var i = 0; i < 5; i++) {
        elements.push({
            T : i,
            V : 'v' + i
        });
    }

    //A converter which convert the data elements to a format we can use
    var items = [];
    var x = Math.ceil(elements.length / 2);
    for (var i = 0; i < x; i++) {
        var index = i * 2;
        var obj = {
            T1 : elements[index].T,
            V1 : elements[index].V
        }
        if (elements[index + 1]) {
            obj.T2 = elements[index + 1].T;
            obj.V2 = elements[index + 1].V
        }
        items.push(obj)
    }

    $scope.items = items;

}]);

Demo: Fiddle

Another slightly different approach can be found here.

Collectives™ on Stack Overflow

AngularJs ng-repeat change loop increment

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related