-1

I have edited the question as it became too long Hi I have this angular code : 

var mod = angular
            .module("myMod",[])
            .controller("myCont",function($scope){
              var obj = [
              {name : "Monica", others :[{age:20},{salary:20000}]},
              {name : "Rachel", others :[{age:16},{salary:28000}]},
              {name : "Pheobe", others :[{age:24},{salary:30000}]}
              ]
              $scope.obj1 = obj;
             })

and this html file :

<!DOCTYPE HTML>
<html  >
    <head> 
        <script src = "angular.js"></script>
        <script src = "angularmy.js"></script>
    </head>
    <body ng-app="myMod" ng-controller="myCont">
        <div>
            <ol>
                <li ng-repeat="item in obj1" ng-init="parentIndex=$index">{{item.name}} 
                <ol ng-repeat="items in item.others">
                    <li >{{items.age }} parentIndex - {{parentIndex}} index - {{$index}}</li>
                    <li >{{items.salary }} parentIndex - {{parentIndex}} index - {{$index}}</li>
                </ol>
                </li>
            </ol>
        </div>
    </body>
</html>

But it is giving the index of the second nested list item also 0 :

  1. Monica

    1. 20 parentIndex - 0 index - 0
    2. parentIndex - 0 index - 0
    3. parentIndex - 0 index - 1
    4. 20000 parentIndex - 0 index - 1

  2. Rachel

    1. 16 parentIndex - 1 index - 0
    2. parentIndex - 1 index - 0
    3. parentIndex - 1 index - 1
    4. 28000 parentIndex - 1 index - 1

  3. Pheobe

    1. 24 parentIndex - 2 index - 0
    2. parentIndex - 2 index - 0
    3. parentIndex - 2 index - 1
    4. 30000 parentIndex - 2 index - 1

Could someone please let me know what is wrong in this code ? Why four outputs are coming instead of 2 ???

YepMe
  • 159
  • 2
  • 11

3 Answers3

0

Try this:

<ol  ng-repeat="items in item.others track by $index">
   <li>{{items.age}} parentIndex - {{parentIndex}} index - {{$index}}</li>
   <li>{{items.salary}} parentIndex - {{parentIndex}} index - {{$index}}</li>
</ol>
Abel
  • 355
  • 9
  • 20
  • 1
    This is not going to help, since OP has only 1 object inside, so `$index` will always have `0` value – Rajesh Aug 03 '16 at 10:40
0

According to this what you want to accomplish is:

<li ng-repeat="item in obj1">{{item.name}} 
    <ol ng-repeat="o in item.others">
        <li>{{o.age}} parentIndex - {{$parent.$index}} index - {{$index}}</li>
        <li>{{o.salary}} parentIndex - {{$parent.$index}} index - {{$index}}</li>
    </ol>
</li>
Community
  • 1
  • 1
Kutyel
  • 8,575
  • 3
  • 30
  • 61
  • I know how to get the parent's name. What I do not understand is how array in the controller can be accessed and also when the objects in the array object are different then also it is giving some weird output. – YepMe Aug 03 '16 at 11:55
  • @YepMe I think your variable names are not helping, check my edited answer, in `item` you have all the data from the `obj1`, like the name you just mentioned, but in the second `ng-repeat` you can access in `o` all the properties of the `others` **array**, that is why you can see "age" and "salary" being repeated. The important part that I wanted to show you is that the current index for our `ng-repeat` is `$index` and the index of the parent `ng-repeat` can be accessed via `$parent.$index`, that is all... – Kutyel Aug 03 '16 at 12:00
  • If you check even I had done that items.age and items.salary – YepMe Aug 03 '16 at 12:04
  • 1
    I dont reall know what are you asking for and what specific problem do you have, for me the example is cristal clear and there is no possible question about it. – Kutyel Aug 03 '16 at 12:05
  • You should really consider choosing more helpful variable names to use in your `ng-repeat`s. – ksav Aug 03 '16 at 14:04
0

To help you visualise what you are displaying, you should really consider using more helpful variable names in your ng-repeats, especially when they start nesting.

Controller:

var mod = angular
.module("myMod",[])
.controller("myCont",function($scope){
  var obj = [
    {name : "Monica", others :[{age:26,salary:20000}]},
    {name : "Rachel", others :[{age:28,salary:28000}]},
    {name : "Pheobe", others :[{age:29,salary:30000}]}
  ]
  $scope.obj1 = obj;
})

Template: (here i've replaced the ol with ul to avoid another potential source of confusion)

<body ng-app="myMod" ng-controller="myCont">
    <ul>
        <li ng-repeat="person in obj1" >Name: {{person.name}} | Person Index: {{$index}}
            <ul ng-repeat="detail in person.others">
                <li>Age: {{detail.age}} | Salary: {{detail.salary}} | Index: {{$index}} | Parent Index: {{$parent.$index}}</li>
            </ul>
        </li>
    </ul>
</body>

You biggest issue was that you had 2 x lis inside of your 2nd ng-repeat.

Output:

Name: Monica | Person Index: 0
Age: 26 | Salary: 20000 | Index: 0 | Parent Index: 0
Name: Rachel | Person Index: 1
Age: 28 | Salary: 28000 | Index: 0 | Parent Index: 1
Name: Pheobe | Person Index: 2
Age: 29 | Salary: 30000 | Index: 0 | Parent Index: 2

Fiddle: https://jsfiddle.net/7uva6rgt/2/

ksav
  • 20,015
  • 6
  • 46
  • 66
  • Thanks but I was able to access the values when the object was like this: {name : "Monica", others :[{age:26,salary:20000}]}, {name : "Rachel", others :[{age:28,salary:28000}]}, {name : "Pheobe", others :[{age:29,salary:30000}]} But when it is like below I am not able to access it properly. Others have two objects with different keys. '{name : "Monica", others :[{age:20},{salary:20000}]}, {name : "Rachel", others :[{age:16},{salary:28000}]}, {name : "Pheobe", others :[{age:24},{salary:30000}]}' – YepMe Aug 03 '16 at 14:24
  • I didn't change anything in your data object. – ksav Aug 03 '16 at 14:26
  • Thanks again but kindlynote you are accessing "[{age:26,salary:20000}]" and I am trying to access "[{age:26},{salary:20000}]" – YepMe Aug 03 '16 at 14:29