Explore the live code example:
Angular JS
Is there a way to effectively iterate through nested key-value pairs and display them as shown below?
The desired output should resemble a tree structure like this:
-touts
-classes
-col-12
-col-md-12
-col-lg-12
However, the current output appears like this:
touts
{"classes":["col-12","col-md-12","col-lg-12"]}
JavaScript Functionality:
var currentApp = angular.module('currentApp', []);
currentApp.controller('ACtrl', function($scope){
$scope.templates = {
'touts' : [
{
'classes' : ['col-12', 'col-md-12', 'col-lg-12' ]
}
]
};
});
HTML Structure:
<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>