我如何正确地通过 angularJS 中的嵌套键值对重复 ng-repeat [英] How do I properly ng-repeat through nested key value pairs in angularJS

问题描述

查看实时代码:

Angular JS

我到底如何正确循环嵌套键值对并正确输出它们，如下所示?

我想要的是这样的树

-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:

Angular JS

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 中的嵌套键值对重复 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！