I have a requirement to display the list of items in angular with each row having only 2 items. Suppose there are 5 items in the list, the output should be 3 rows with first 2 rows with 2 columns and last row with one column.

<div ng-repeat="result in results" ng-if="$index % 2 == 0" class="row">
    <div class="col-xs-6">{{result[$index]}}</div>
    <div class="col-xs-6">{{result[$index + 1]}}</div>
</div>

I have a requirement to display the list of items in angular with each row having only 2 items. Suppose there are 5 items in the list, the output should be 3 rows with first 2 rows with 2 columns and last row with one column.

<div ng-repeat="result in results" ng-if="$index % 2 == 0" class="row">
    <div class="col-xs-6">{{result[$index]}}</div>
    <div class="col-xs-6">{{result[$index + 1]}}</div>
</div>

Above is the code, this code works fine when the result is a list of items. But when the result is a list of objects it does not print. Example, if result object has birthDate or Id property how do i display those? {{result.birthDate}} prints the correct value but how do I print the index + 1 value ? I tried {{result[$index + 1].birthDate}} or {{result.birthDate[$index + 1]}} does not work. The below code does not work but, i need something like this,

<div ng-repeat="result in results" ng-if="$index % 2 == 0" class="row">
    <div class="col-xs-6">{{result[$index].birthDate}}</div>
    <div class="col-xs-6">{{result[$index + 1].birthDate}}</div>
</div>

Appreciate your help

• java
• javascript
• html
• angularjs
• twitter-bootstrap

Share Improve this question Follow edited Jun 7, 2015 at 18:55 KTAnj 1,35611 gold badge1515 silver badges3636 bronze badges asked Jun 7, 2015 at 17:44 Maverick RizMaverick Riz 2,06555 gold badges2121 silver badges2323 bronze badges 2

• Are you sure that {{result[$index]}} and {{result[$index + 1]}} were working because for me they are not giving any output, but when I tried results instead of result its working fine. – shreyansh Commented Jun 7, 2015 at 18:35
• that was my bad. Yes, it need to be results as pointed by @softvar and wZVang – Maverick Riz Commented Jun 7, 2015 at 18:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

DEMO - http://jsfiddle/softvar/yk8phbc5/

JS:

var app = angular.module('myApp', []);

app.controller('myCtrl', function ($scope) {
    $scope.results = [
        {birthDate: '01/08/1982'},
        {birthDate: '11/08/1992'},
        {birthDate: '21/08/2002'},
        {birthDate: '31/08/2012'}
    ]
});

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="result in results" ng-if="$index % 2 == 0" class="row">
        <div class="col-xs-6">First: {{results[$index].birthDate}}</div>
        <div class="col-xs-6">Second: {{results[$index + 1].birthDate}}</div>
        <br/>
    </div>
</div>

{{result[$index].birthDate}} must be {{results[$index].birthDate}}

<div ng-repeat="result in results" ng-if="$index % 2 == 0" class="row">
    <div class="col-xs-6">{{results[$index].birthDate}}</div>
    <div class="col-xs-6">{{results[$index + 1].birthDate}}</div>
</div>