Javascript 如何正确地通过angularJS中的嵌套键值对进行重复

查看实时代码：

我究竟如何正确地循环嵌套的键值对并正确地输出它们，如下所示

我想要的是一棵这样的树

-touts
  -classes
    -col-12 
    -col-md-12
    -col-lg-12

目前的看法是：

touts
  {"classes":["col-12","col-md-12","col-lg-12"]}

JS:

HTML:

{{key}}


{{class}}

你很接近，我更新了小提琴

{{key}}


{{o}

{{i}
你必须循序渐进地思考

 templates = {'touts' : [{'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }]};  
 // key = 'touts'
 // props = [{'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }] 
 // props[0] = {'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }
 // classkey = 'classes'
 // classprop = ['col-12', 'col-md-12', 'col-lg-12' ]
 // and print classprop by ng-repeat 

所以你可以试试这个：

 <div ng-app="currentApp">
    <div ng-controller="ACtrl">
        <ul ng-repeat="(key, props) in templates">
            <li>{{key}}</li>
            <li>
               <ul ng-repeat="(classkey, classprop) in props">
                  <li>{{classkey}}</li>
                  <li>
                      <ul>
                          <li ng-repeat="class in classprop">
                      </ul>
                  </li>
               </ul>
            </li>
         </ul>
    </div>
</div>



{{key}}


{{classkey}}








所以这是一个很老的问题，但是如果您稍微修改了对象（将数组类型替换为对象），下面的模板应该可以正常工作


angular.module（'init'，[]）
.controller（'test'，['$scope'，function（$scope）{
$scope.templates={
“兜售者”：{
“类”：{
“col-12”：{}，
'col-md-12'：{}，
'col-lg-12'：{}
}
}
};
}]);
ul{
列表样式：无；
}

{{key}}






在递归循环中如何执行此操作？不太清楚您的意思。也许你最好发一个问题？
   <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>

 templates = {'touts' : [{'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }]};  
 // key = 'touts'
 // props = [{'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }] 
 // props[0] = {'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }
 // classkey = 'classes'
 // classprop = ['col-12', 'col-md-12', 'col-lg-12' ]
 // and print classprop by ng-repeat 

 <div ng-app="currentApp">
    <div ng-controller="ACtrl">
        <ul ng-repeat="(key, props) in templates">
            <li>{{key}}</li>
            <li>
               <ul ng-repeat="(classkey, classprop) in props">
                  <li>{{classkey}}</li>
                  <li>
                      <ul>
                          <li ng-repeat="class in classprop">
                      </ul>
                  </li>
               </ul>
            </li>
         </ul>
    </div>
</div>