Creating nested ng-repeats in Angular

Question

I'm using Angular and trying to create nested ng-repeats. I've referred to the ng-repeat examples on the Angular site here here. But when I use the code below, the <ul> tag repeats but the <li> tag is blank. Any suggestions on how to do this correctly?

(EDIT: Updated array to address comment)

Array:

vm.projects = [
  {"$id": "1234",
   "people": {
    "-K-v76MWDTIQqnR2w10r": {
     "name": "John Doe",
     "city": "New York",
     "company": "Acme, Inc."
  },
  "-K-q7HmGUduAf5JkSGDY": {
    "name": "Jane Smith",
    "city": "Chicago",
    "company": "ABC, Inc."
   }
  }
},
{
 "$id": "2345",
 "people": {
   "-K-qq6Pcd0v1wggmALcZ": {
    "name": "David Jones",
    "city": "London",
    "company": "Stardust, LLC"
   }
  }
}
]

HTML

<ul ng-repeat="project in vm.projects" >ID: {{project.$id}}
  <li ng-repeat="name in vm.projects.people.name track by projects.$id">{{project.person.name}}
  </li>
</ul>

Here is what actually displays:

ID: 1234
ID: 2345

Is the vm.projects example you posted a direct copy from your server response? It is not valid JSON, nor is it a valid JS object or array. — buzzsaw
– buzzsaw, Commented Oct 19, 2015 at 4:07
@Words Like Jared I must still be doing something wrong because your solution didn't work. The bullet points now display for the <li> tags but still no content. — Ken
– Ken, Commented Oct 19, 2015 at 4:30

Sandeep · Accepted Answer · 2015-10-19 05:18:55Z

You can use parent ul project object in li like below:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example85-production</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-animate.js"></script>

</head>
<body ng-app="initExample">
  <script>
  angular.module('initExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.projects = [{"$id":"1234","people":{"-K-v76MWDTIQqnR2w10r":{"name":"John Doe","city":"New York","company":"Acme, Inc."},"-K-q7HmGUduAf5JkSGDY":{"name":"Jane Smith","city":"Chicago","company":"ABC, Inc."}}},{"$id":"2345","people":{"-K-qq6Pcd0v1wggmALcZ":{"name":"David Jones","city":"London","company":"Stardust, LLC"}}}];
    }]);
</script>
<div ng-controller="ExampleController">
  <ul ng-repeat="project in projects" >ID: {{project.$id}} 
  <li ng-repeat="(id, person) in project.people">{{person.name}}
  </li>
</ul>
</div>
</body>
</html>

Jesus is Lord · Accepted Answer · 2015-10-19 04:00:33Z

1

You want to do something like (in your inner ng-repeat):

name in project.people

Instead of

name in vm.projects.people.name track by projects.$id

(If you post a valid JSON sample I can give you the exact thing to put.)

answered Oct 19, 2015 at 4:00

Jesus is Lord

15.5k11 gold badges71 silver badges103 bronze badges

Comments

Ashokreddy · Accepted Answer · 2015-10-19 04:24:52Z

0

you can use like this 


<ul>
           <li ng-repeat="c in countries">
               <label>
                   <input type="checkbox" ng-model="CountryName" />
                   {{c.CountryName}}
               </label>
               <ul ng-repeat="s in cities" ng-if="c.CountryId==s.CountryId">
                   <li>
                       <label>
                            <input type="checkbox" ng-model="CityName" />
                          {{s.CityName}}
                       </label>
                     </li>
               </ul>
           </li>
       </ul>


 refere below url http://www.codeproject.com/Tips/987499/Nested-Ng-Repeat-on-AngularJS

answered Oct 19, 2015 at 4:24

Ashokreddy

3521 silver badge11 bronze badges

Comments

Keith James · Accepted Answer · 2015-10-19 04:40:46Z

First it's important to point out that there were some significant syntax issues in your JSON which was breaking your ng-repeats.

You must refer to the object inside your first ng-repeat (the one you declare in the ul tag) to make sure the scope is mapped properly for the li tag scopes. In my example "someKey" refers to the alpha numeric strings you had. You will need to make sure these are the same in each son structure in order to refer to them properly. This is why I changed the name to "someKey". My suggestion is to use a key named "data" and then use "id" to keep track of the name of the data you are using for your key. Example:

{"$id": "1234",
  "people": {

 id: "-K-v76MWDTIQqnR2w10r",
 data: {
 "name": "John Doe",
 "city": "New York",
 "company": "Acme, Inc."

},

Here's the code:

  $scope.vm = {};
  $scope.vm.projects = [
      {$id:"1234",
       "people":[
           {"someKey":
             {"name":"John Doe","city":"New York","company":"Acme, Inc."}
           },
           {"someKey":
             {"name":"Jane Smith","city":"Chicago","company":"ABC, Inc."}
           }]  
  },    
      {$id:"2345",
       "people":[
               {"someKey":
                  {"name":"David Jones","city":"London","company":"Stardust, LLC"}
               }]
            
 }
  ]

<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <ul ng-repeat="project in vm.projects" >ID: {{project.$id}}
  <li ng-repeat="people in project.people">{{people.someKey.name}}
  </li>
</ul>
</div>

Collectives™ on Stack Overflow

Creating nested ng-repeats in Angular

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related