当前位置: 首页 > 面试题库 >

如何在angularJS中通过嵌套键值对正确ng-repeat

洪经义
2023-03-14
问题内容

查看实时代码:

角JS

到底如何正确遍历嵌套键值对并正确输出,如下所示?

我要的是一棵像这样的树

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

当前视图是:

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>

问题答案:

您非常接近,我更新了小提琴。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部分: 但是不知何故,它向我展示了所有物品。如何筛选(键,值)? 问题答案: Angular 过滤器只能通过angular的API应用于数组,而不能应用于对象- “从数组中选择项的子集,并将其作为新数组返回。” 您在此处有两个选择: 1)移至数组或 -2)预过滤项目,如下所示: 并在控制器上: jsfiddle :http : //jsfid

  • 如何使用AngularJS正确显示键值对? 这是我的HTML: 以下是JSON数据: 以下是输出: 我想要:

  • 问题内容: 我有这样的角度嵌套对象。有没有办法为嵌套属性过滤它 我只显示父元素,但想按两个元素进行过滤,例如: 问题答案: 是的,如果我正确理解您的示例,则可以。 根据集合的大小,计算迭代所用的集合可能会更好,这样过滤器就不会随着模型的更改而不断地进行操作。 http://jsfiddle.net/suCWn/ 基本上,如果我理解正确,您会执行以下操作:

  • 问题内容: 在我的控制器中,我有如下数据: 现在,此数据是包含键和值的字典。 我可以使用模板中的属性。有什么办法可以遍历键并将它们显示在表格中吗? 数据是这样的 问题答案: 怎么样: 该方法在docs中列出:https : //docs.angularjs.org/api/ng/directive/ngRepeat

  • 问题内容: 我在下面的对象中尝试获取所有id值。 使用以下代码,我仅获得第一个id值。有没有办法从嵌套对象中获取所有id值,而无需使用任何外部模块。 预期产量 问题答案: 您可以使用如下所示的JavaScript函数来获取嵌套属性: 检查此小提琴以获取可行的解决方案。

  • 我想在一个带有递归的Javascript嵌套对象中找到一个值的键。 下面是我对函数的尝试。有没有更优雅的方法来实现这一点? null null 例如,有没有一种方法可以避免检查的值然后中断?我觉得result应该能够在调用堆栈中冒泡,直到它在第一次函数调用时返回,而不必中断。