Using Angular ng-repeat to create nested list

Question

I want to create a list of layers and nested list of sublayers for each layer by iterating this object with 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>

The result is that only the Layers are being listed. It seems that ng-repeat doesn't cascade down to the next <ul>. I tried putting ng-repeat inside the <ul> tag but that just the whole list instead of the just the required sub-layers.

This is the result I'm trying to get:

Layers
- Layer Base Maps
    - Sub Layer Open Street Map

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

You have to remake your list because it should look like: [{ layername:"Base Maps", layertype:"layer", sublayer: [layername:"Open Street Map", layertype:"sublayer"]}]. Then you can easily generate view easily. Check my answer below. Thanks. — AHJeebon
– AHJeebon, Commented Oct 15, 2016 at 8:32

AHJeebon · Accepted Answer · 2016-10-15 08:42:38Z

3

I think you are looking for this:

You have to redesign your object for better output. I have include sublayer inside layer. That's why you can easily display sub layer in 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>

edited Oct 15, 2016 at 8:42

answered Oct 15, 2016 at 8:26

AHJeebon

1,2481 gold badge12 silver badges17 bronze badges

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

3 Comments

AHJeebon Over a year ago

Oh sorry @Robert, Layer name was not appear because of my little mistake. Check it now.

monikapatelIT Over a year ago

@AHJeebon That's an awesome solution !! Recreating new array list. it would be easier if array list has sublayer as another property:)

Robert Over a year ago

@AHJeebon I agree, that's awesome. Thanks!

Collectives™ on Stack Overflow

Using Angular ng-repeat to create nested list

HTML

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related