CODEWITHSUNDEEP
javascriptangularjs
max
max

Reputation: 623

AngularJS nested ng-repeat

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??

Upvotes: 1

Views: 142

Answers (3)

huan feng
huan feng

Reputation: 8623

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>

Upvotes: 1

JanR
JanR

Reputation: 6132

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/

Upvotes: 1

V31
V31

Reputation: 7666

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>

Upvotes: 1

Related Questions