CODEWITHSUNDEEP
javascriptarraysangularjs
Stéphane Tanguy
Stéphane Tanguy

Reputation: 33

angularjs, bug in nested array with same value

i've tried the last two days on a little problem.

I'm new on AngularJS, and I don't understand why this is not working.

If there is a same value in an array, the nested ng-repeat doesn't work :(

Is someone can help me please ?

index.html :

<!DOCTYPE html>
<html ng-app="testApp">
<head>
    <title></title>
</head>
<body ng-controller="testCtrl">
    <ul>
        <li ng-repeat="item in items">
            {{item.ip}}
            <ul>
                <li ng-repeat="s in item.status">{{s}}</li>
            </ul>
        </li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

app.js (this is working)

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

app.controller('testCtrl', function ($scope) {

$scope.items = [
    {ip: '192.168.1.23', status: ['aaa','bbb','ccc','ddd','eee','fff']},
    {ip: '192.168.1.24', status: ['ggg','hhh','iii','jjj','kkk','lll']}
];

});

app.js (doesn't work)

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

app.controller('testCtrl', function ($scope) {

$scope.items = [
    {ip: '192.168.1.23', status: ['na','up','na','down','down','na']},
    {ip: '192.168.1.24', status: ['up','down','na','up','up','na']}
];

});

Thanks a lot

Upvotes: 1

Views: 72

Answers (2)

A.B
A.B

Reputation: 20445

where there are same values append "track by $index" to ng-repeat like

  ng-repeat="s in item.status track by $index"

Upvotes: 1

Kuba Jagoda
Kuba Jagoda

Reputation: 5547

You have to use track by expression to tell angular that elements are different. Try

<ul>
    <li ng-repeat="item in items">
        {{item.ip}}
        <ul>
            <li ng-repeat="s in item.status track by $index">{{s}}</li>
        </ul>
    </li>
</ul>

Upvotes: 2

Related Questions