Question

我想通过用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

Answer 1

我认为你正在寻找这个：

您必须重新设计对象才能获得更好的输出。我有包括子层内层。这就是为什么你可以轻松地显示子图层的原因图。

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>

使用Angular ng-repeat创建嵌套列表

HTML

1 个答案: