How to display index of nested ng-repeat

Question

I have array like this:

$scope.first = [ [ [ "a", "b", "c" ], [ "d", "e", "f" ] ], [ [ "g", "h", "i" ], [ "g", "k", "l" ] ], [ [ "m", "n", "o" ], [ "p", "q", "r" ] ], [ [ "s", "t", "w" ], [ "x", "y", "z" ] ] ];

I have nested ng-repeat like this:

<div ng-repeat="seconds in first">
   <div ng-repeat="thirds seconds">
       <div ng-repeat="item in thirds">
           <span>{{item}}</span>
       </div>
   </div>
</div>

and I want to display

1-a

2-b

3-c

4-d

5-f

........

25-y

I really appreciate your sure help.

@DavidL: I have tried to get index of each ng-repeat to sum , firstIndex+secondIndex+thirdIndex+1 by use ng-init="firstIndex=$index" ...... — Sophon Men
– Sophon Men, Commented May 19, 2016 at 4:20
What if you change a bit your json to add also the index for each letter?! — Bettimms
– Bettimms, Commented May 19, 2016 at 4:44
@Bettimms This is a sample data that represent my real data I get from Backend side. — Sophon Men
– Sophon Men, Commented May 19, 2016 at 4:46
You can still manipulate it into a better data format in your controller. The act of rendering the view itself shouldn't be used for calculating data. Anything will have to use ng-init, which should be used very sparingly. This sort of problem is why there is the C in MVC. — Dylan Watt
– Dylan Watt, Commented May 19, 2016 at 5:13

Bettimms · Accepted Answer · 2016-05-19 05:22:33Z

Try this (html side solution)

(function ()
{
    var app = angular.module("app", []);

    function HomeController()
    {
        var vm = this;
        vm.first = [
            [
                ["a", "b", "c"],
                ["d", "e", "f"]
            ],
            [
                ["g", "h", "i"],
                ["g", "k", "l"]
            ],
            [
                ["m", "n", "o"],
                ["p", "q", "r"]
            ],
            [
                ["s", "t", "w"],
                ["x", "y", "z"]
            ]
        ];
    }

    app.controller("HomeController", [HomeController]);

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title>Angular JS App</title>
    </head>
    <body>

        <div class="container" ng-controller="HomeController as homeCtrl">
            <div ng-repeat="(firstIndex, seconds) in homeCtrl.first" ng-init="i = firstIndex">
                <div ng-repeat="(secondIndex, thirds) in seconds" ng-init="j = i * seconds.length+secondIndex">
                    <div ng-repeat="(thirdIndex, item) in thirds" ng-init="k = j * thirds.length+thirdIndex">
                        <span>{{k+1}}-{{item}}</span>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Alex W · Accepted Answer · 2016-05-19 04:51:51Z

0

I think this might be what you are looking for, though my end value as 24-z, not 25-y, so something went wrong there.

Below is the html side (FYI you missed the in in the second ng-repeat call

{{ setCounterToZero() }}
<div ng-repeat="seconds in first">
    <div ng-repeat="thirds in seconds">
        <div ng-repeat="item in thirds">
            <span>{{ outputItem(item) }}</span>
            <br />
        </div>
    </div>
</div>

And here is the code for the controller

$scope.first = [
    [
        ["a", "b", "c"],
        ["d", "e", "f"]
    ],
    [
        ["g", "h", "i"],
        ["g", "k", "l"]
    ],
    [
        ["m", "n", "o"],
        ["p", "q", "r"]
    ],
    [
        ["s", "t", "w"],
        ["x", "y", "z"]
    ]
];

$scope.counterValue = 0;

$scope.setCounterToZero = function () {
    $scope.counterValue = 0;
}

$scope.outputItem = function (item) {
    $scope.counterValue++;

    return $scope.counterValue + '-' + item;
}

Is that what you are looking for?

answered May 19, 2016 at 4:51

Alex W

5055 silver badges8 bronze badges

2 Comments

Sophon Men Over a year ago

It's good idea, But if there is something by using $index is better, Thank you :)

Alex W Over a year ago

give me a couple of minutes or try the other guys answer and see if thats what you are looking for

Collectives™ on Stack Overflow

How to display index of nested ng-repeat

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related