Exploring the power of Angular's ng-repeat to generate hierarchical lists

Question

Exploring the power of Angular's ng-repeat to generate hierarchical lists

I am looking to display a structured list of layers and sublayers by looping through an object using ng-repeat.

var lyrslist = [
    { layername: "Base Maps", layertype: "layer" },
    { layername: "Open Street Map", layertype: "sublayer" },
    { layername: "Designated Sites", layertype: "layer" },
    { layername: "Ancient Woodlands", layertype: "sublayer" },
    { layername: "Conservation Areas", layertype: "sublayer" },
    { layername: "Listed Buildings", layertype: "sublayer" }
];

HTML

<h5>Layers</h5>
<ul ng-repeat="lyr in lyrslist">
  <li ng-if="lyr.layertype === 'layer'" >
    Layer {{lyr.layername}}
    <ul>
      <li ng-if="lyr.layertype === 'sublayer'"> 
       Sub Layer {{lyr.layername}}
     </li>
   </ul>
 </li>
</ul>

Currently, only the Layers are being listed. It appears that ng-repeat is not cascading down to the next <ul>. I attempted placing ng-repeat inside the <ul> tag but it displayed the entire list instead of just the desired sub-layers.

This is how I envision the final output:

Layers
- Layer Base Maps
    - Sub Layer Open Street Map

- Layer Designated Sites
    - Sub Layer Ancient Woodlands
    - Sub Layer Conservation Areas
    - Sub Layer Listed Buildings

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

Here is the solution you are seeking:

To enhance the output, consider redesigning your object by incorporating sublayers within layers. This approach allows for easy display of sub layers in the view.

var app = angular.module('app',[])
app.controller('ctrl',function($scope){
var lyrslist = [{ layername:"Base Maps",  layertype:"layer"},  {layername:"Open Street Map",  layertype:"sublayer"}, { layername:"Designated Sites",  layertype:"layer"}, { layername:"Ancient Woodlands",  layertype:"sublayer"}, { layername:"Conservation Areas",  layertype:"sublayer"}, { layername:"Listed Buildings",  layertype:"sublayer"}];

var newList = []; var count = 0; 
angular.forEach(lyrslist, function(value, key) {
if(value.layertype=='layer'){
  this.push(value);
  this[count].sub = []; //define sub layer inside layer
  count++;
  }else{
  this[count-1].sub.push(value); //assign sub layer inside layer
  }
}, newList);
//console.log(newList);
$scope.lyrslist = newList;
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
        <ul>
            <li ng-repeat="lyr in lyrslist">
                Layer: {{lyr.layername}}
              <ul>
                  <li ng-repeat="sublyr in lyr.sub"> 
                     SubLayer: {{sublyr.layername}}
                 </li>
              </ul>
            </li>
    </ul>
</div>

Answer 2

Here is the solution you are seeking:

To enhance the output, consider redesigning your object by incorporating sublayers within layers. This approach allows for easy display of sub layers in the view.

var app = angular.module('app',[])
app.controller('ctrl',function($scope){
var lyrslist = [{ layername:"Base Maps",  layertype:"layer"},  {layername:"Open Street Map",  layertype:"sublayer"}, { layername:"Designated Sites",  layertype:"layer"}, { layername:"Ancient Woodlands",  layertype:"sublayer"}, { layername:"Conservation Areas",  layertype:"sublayer"}, { layername:"Listed Buildings",  layertype:"sublayer"}];

var newList = []; var count = 0; 
angular.forEach(lyrslist, function(value, key) {
if(value.layertype=='layer'){
  this.push(value);
  this[count].sub = []; //define sub layer inside layer
  count++;
  }else{
  this[count-1].sub.push(value); //assign sub layer inside layer
  }
}, newList);
//console.log(newList);
$scope.lyrslist = newList;
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
        <ul>
            <li ng-repeat="lyr in lyrslist">
                Layer: {{lyr.layername}}
              <ul>
                  <li ng-repeat="sublyr in lyr.sub"> 
                     SubLayer: {{sublyr.layername}}
                 </li>
              </ul>
            </li>
    </ul>
</div>

Exploring the power of Angular's ng-repeat to generate hierarchical lists

HTML

Answer №1

Similar questions

Unable to utilize the three.js texture loader within a JavaScript worker environment

Select a file and upload an image promptly after it is chosen

Tips for sending and retrieving parameters using the POST technique

Puppeteer with Typescript: Encountering issues during the transpilation process

How can you access the URL of a resource action in Angular?

How can I filter an array to retain only the initial 5 characters of every element?

Utilizing Firebase in place of .json files for the AngularJS Phonecat application

Achieving the highest ranking for Kendo chart series item labels

tips for using Node Mailer to send emails without using SMTP

Tips for displaying a close icon after completing a file upload

Removing the hash symbol in Angular: A step-by-step guide

Troubleshooting the issue with default useAsDefault routing in Angular 2

Which free and publicly accessible JSON image API is available for testing JSON requests?

Javascript 'break' statement is always executed

Whenever text is present, the sides of my box model, constructed using HTML5 and CSS3, are always pushed downward

Ways to store Token in Browser Cache?

Making an Http Get request in Angular 2 by passing a JSON object

Encountering NodeJS server issues with 505/404 errors while fetching partials

Having trouble deciphering the JSON data structure in JavaScript

Tips for creating a Carousel with more than three images using Bootstrap