Блог

Я хочу создать список слоев и вложенный список подслоев для каждого слоя, повторив этот объект с помощью 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>
 

В результате получается, что отображаются только слои. Кажется, это ng-repeat не переходит каскадом к следующему <ul> . Я попытался поместить ng-repeat внутрь <ul> тега, но это только весь список, а не только требуемые подслои.

Это результат, который я пытаюсь получить:

 Layers
- Layer Base Maps
    - Sub Layer Open Street Map

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

Я думаю, вы ищете это:

Вы должны перепроектировать свой объект для лучшего результата. У меня есть включить подслой внутри слоя. Вот почему вы можете легко отобразить дополнительный слой в поле зрения.

 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>