![正确]( "正确")
本文介绍了我如何通过 angularJS 中的嵌套键值对正确地重复的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
查看实时代码:
我到底如何正确循环嵌套键值对并正确输出它们，如下所示?
我想要的是这样的树
-touts-类-col-12-col-md-12-col-lg-12
当前视图是:
吹捧{"classes":["col-12","col-md-12","col-lg-12"]}
JS:
var currentApp = angular.module('currentApp', []);currentApp.controller('ACtrl', function($scope){$scope.templates = {'吹捧':[{'类':['col-12'、'col-md-12'、'col-lg-12']}]};});
HTML:
<div ng-controller="ACtrl"><ul ng-repeat="(key, prop) in 模板"><li>{{key}}</li><li><ul ng-repeat="class in templates[key]"><li>{{class}}</li>
解决方案
你很接近，我更新了小提琴.http://jsfiddle.net/y9wj6/9/
<li>{{key}}</li><ul ng-repeat="prop 中的 val"><ul ng-repeat="(o, values) in val"><li>{{o}}</li><ul ng-repeat="i in values"><li>{{i}}</li></ul
View live code:
How in the world do I properly loop through nested key value pairs and properly output them like below?
View I want is a tree like so
-touts
-classes
-col-12
-col-md-12
-col-lg-12
Currently the view is:
touts
{"classes":["col-12","col-md-12","col-lg-12"]}
JS:
var currentApp = angular.module('currentApp', []);
currentApp.controller('ACtrl', function($scope){
$scope.templates = {
'touts' : [
{
'classes' : ['col-12', 'col-md-12', 'col-lg-12' ]
}
]
};
});
HTML:
<div ng-app="currentApp">
<div ng-controller="ACtrl">
<ul ng-repeat="(key, prop) in templates">
<li>{{key}}</li>
<li>
<ul ng-repeat="class in templates[key]">
<li>{{class}}</li>
</ul>
</li>
</ul>
</div>
</div>
解决方案
You are pretty close, I updated the fiddle. http://jsfiddle.net/y9wj6/9/
<ul ng-repeat="(key, prop) in templates">
<li>{{key}}</li>
<ul ng-repeat="val in prop">
<ul ng-repeat="(o, values) in val">
<li>{{o}}</li>
<ul ng-repeat="i in values">
<li>{{i}}</li>
</ul
</ul>
</ul>
</ul>
这篇关于我如何通过 angularJS 中的嵌套键值对正确地重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！