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

问题描述

查看现场code：

角JS

如何在世界做我通过嵌套键值对正常循环，并适当地输出他们像下面？

查看我要的是像这样一棵树

  -touts
   - 班
    -COL-12
    -COL-MD-12
    -COL-LG-12
 

目前的观点是：

 吹捧
  {类：[COL-12，COL-MD-12，COL-LG-12]}
 

JS：

  VAR currentApp = angular.module（'currentApp'，[]）;
currentApp.controller（'ACtrl'，函数（$范围）{    $ scope.templates = {
        '吹捧'：[
            {
                类：COL-12，COL-MD-12，COL-LG-12']
            }
        ]
    };
}）;
 

HTML

 ＆LT; D​​IV NG-应用=currentApp＆GT;
    ＆LT; D​​IV NG控制器=ACtrl＆GT;
        ＆LT; UL NG重复=（键，道具）模板＆GT;
            ＆LT;立GT; {{关键}}＆LT; /李＆GT;
              ＆LT;立GT;
                  ＆LT; UL NG重复=类模板[关键]＆GT;
                      ＆LT;立GT; {{}类}＆LT; /李＆GT;
                  ＆LT; / UL＆GT;
            ＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

您是pretty接近，我更新了小提琴。 http://jsfiddle.net/y9wj6/9/

 ＆LT; UL NG重复=（键，道具）模板＆GT;
        ＆LT;立GT; {{关键}}＆LT; /李＆GT;
        ＆LT; UL NG重复=VAL的道具＆GT;
            ＆LT; UL NG重复=（O，价值观）在VAL＆GT;
            ＆LT;立GT; {{Ø}}＆LT; /李＆GT;
                 ＆LT; UL NG重复=我的价值观＆GT;
                      ＆LT;立GT; {{I}}＆LT; /李＆GT;
                  ＆LT; / UL
             ＆LT; / UL＆GT;
        ＆LT; / UL＆GT;
    ＆LT; / UL＆GT;
 

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