AngularJS nested ng-repeat

Question

I have a html like this :

 <div class="fields-plan"data-ng-repeat="roomname in assign.roomname">  
         <section>
         <span>Room: {{roomname}}</span>        
         </section>   
    <ul data-ng-repeat="room in assign.rooms.roomname">
       <li>
       {{room.room}}
       </li>
   <ul>
 </div>

and my angular controller look like this:

    var room = {"1.2":
                [
                    {room: "1.2.1"},
                    {room: "1.2.2"},
                    {room: "1.2.3"}
                ],
        "1.3": [
            {room: "1.3.1"},
            {room: "1.3.2"},
            {room: "1.3.3"}
        ]};


    var keys = Object.keys(room);

    this.roomname = keys;
    this.rooms = room;

In my second ng repeat, it doesn't work and how can i loop based on roomname, that output from the first ng repeat??

V31 · Accepted Answer · 2015-02-12 06:36:11Z

1

Your second ng-repeat needs to take the first ng-repeat value instead of directly taking the room name, so your second ng-repeat should look like this:

Code:

 <div class="fields-plan"data-ng-repeat="(key, value) in assign.rooms">  
         <section>
         <span>Room: {{key}}</span>        
         </section>   
    <ul data-ng-repeat="room in value">
       <li>
       {{room.room}}
       </li>
   <ul>
 </div>

edited Feb 12, 2015 at 6:36

answered Feb 12, 2015 at 6:29

V31

7,6643 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bto.rdz Over a year ago

i was just about to answer this, but his json is not in right formatm this wont work for him

V31 Over a year ago

@bto.rdz: yeah the json is in key, value form so updated the code in the answer

JanR · Accepted Answer · 2015-02-12 06:37:20Z

You can achieve this by slightly reformatting your Json and then using the following code:

The key is to use the value of the first ng-repeat in the second ng-repeat and not trying to reference the first collection.

html:

<div ng-controller="MyCtrl">

    <div class="fields-plan" ng-repeat="room in rooms">  
             <section>
             <span>Room: {{room.name}}</span>        
             </section>   
        <ul ng-repeat="subroom in room">
           <li>
           {{room.subRoom}}
           </li>
       <ul>
     </div>
</div>

javascript:

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.rooms = [ { name : "1.2",
                       subRoom: [
                    "1.2.1","1.2.2","1.2.3"],
                     }, { name: "1.3",
        subRoom: [
            "1.3.1","1.3.2","1.3.3"]}];
}

Fiddle demo: http://jsfiddle.net/0pnam0wj/

huan feng · Accepted Answer · 2015-02-12 06:39:02Z

1

Is this you wanted?

plnkr

<div data-ng-repeat="(roomnamePrefix, roomname) in rooms">  
         <section>
         <span>Room: {{roomnamePrefix}}</span>        
         </section>   
    <ul data-ng-repeat="room in roomname">
       <li>
       {{room.room}}
       </li>
   <ul>
 </div>

answered Feb 12, 2015 at 6:39

huan feng

8,7043 gold badges40 silver badges66 bronze badges

Collectives™ on Stack Overflow

AngularJS nested ng-repeat

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related