The concept of nested ng-repeat in AngularJS

Question

The concept of nested ng-repeat in AngularJS

My HTML structure is as follows:

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

The Angular controller I am using looks 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;

However, in the second ng repeat, the loop doesn't work properly. How can I iterate based on the roomname obtained from the first ng repeat?

javascript angularjs

Answer 1

Answer №1

To improve your code, make sure that your second ng-repeat is pulling the value from the first ng-repeat rather than directly from the room name. Here's how you should modify your second ng-repeat:

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

Answer 2

To improve your code, make sure that your second ng-repeat is pulling the value from the first ng-repeat rather than directly from the room name. Here's how you should modify your second ng-repeat:

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

Answer 3

Answer №2

To achieve the desired outcome, you can adjust your Json format slightly and utilize the code snippet provided below:

The crucial aspect is to utilize the value from the initial ng-repeat within the second ng-repeat rather than attempting to reference the initial collection.

Here is the HTML structure:

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

And here is the corresponding JavaScript code:

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"]}];
}

For a live demonstration, refer to this Fiddle link: http://jsfiddle.net/0pnam0wj/

Answer 4

To achieve the desired outcome, you can adjust your Json format slightly and utilize the code snippet provided below:

The crucial aspect is to utilize the value from the initial ng-repeat within the second ng-repeat rather than attempting to reference the initial collection.

Here is the HTML structure:

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

And here is the corresponding JavaScript code:

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"]}];
}

For a live demonstration, refer to this Fiddle link: http://jsfiddle.net/0pnam0wj/

Answer 5

Answer №3

Is this what you were looking for?

Check out this plunker

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

Answer 6

Is this what you were looking for?

Check out this plunker

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

The concept of nested ng-repeat in AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

Exploring Node.js: Uncovering the Secrets of Checking Dependency Versions

What is the correct method to choose an element in jQuery based on the function's id parameter

AngularJS's ScrollTo function allows users to scroll to a specific

Refreshing content with Ajax when the back button is clicked

Learn how to combine pie and bar charts using Highcharts. Discover how to efficiently load JSON data and understand the different ways

Efficiently bundling Angular templates using Grunt and Browserify

Managing Modules at Runtime in Electron and Typescript: Best Practices to Ensure Smooth Operation

What causes the error "Why am I receiving a "Cannot read property 'length' of undefined" when looping through a pug template?

Enhance Your Tables with JQuery Calculations

What are the steps to determine if a radio has been examined through programming?

Tips for incorporating an onClick event into a variable beyond the class extension

The sorting function is failing to produce the expected order of values

Sharing data between ExpressJS and AngularJS can be achieved through various methods such as HTTP

Creating an Editor for Input Text Field in HTML: A Step-by-Step Guide

Is there a way to stop a specific route in Express from continuing further execution without completing its function?

I am looking to configure a specific MUI dropdown to appear below a particular field

Different ways to conditionally set the expanded prop for the Material UI TreeView component

After converting my HTML elements to JSX in Next.js, I am experiencing issues with my CSS files not being applied

Enhance the functionality of $resource with dynamic actions

Refresh the component data according to the vuex state