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

Experiencing an unexpected abundance of console logs when implementing React Hooks

Utilizing react-query and next.js to pre-fetch initial data and automatically re-fetch when a filter is modified

Troubleshooting Node.js and Express: Adding to array leads to displaying "[object Object]"

New replacement for routerState.parent feature that has been deprecated in angular2

The submission of the form is not functioning correctly when triggered by JavaScript using a button

Rendering the HTML5 canvas within a console environment

Steps for sending a form with jQuery's submit method1. Start

What are the best ways to prevent JavaScript and CSS from blocking the render?

Javascript code has been implemented to save changes and address resizing problems

Safari's Failure to Execute Ajax Requests

Can the AJAX URL be loaded onto a new page?

Adjusting picture dimensions with percentages in canvas and jquery

trouble combining two arrays of JavaScript objects

When fetching data from the API in Angular, the response is displayed as an object

Please refrain from submitting the form until the slow AJAX jQuery process has finished

nested dropdowns in Bootstrap 4

Preserve marked checkboxes upon page refresh

What is the best way to send a JSON string as a prop?

Example using three.js showing issues with external resources failing to load on jsfiddle.net

Utilizing a feature module imported from a separate Angular4 project