如何使用 ng-repeat 遍历 JSON 中的嵌套数组？

27 浏览
0 Comments

如何使用 ng-repeat 遍历 JSON 中的嵌套数组？

我正在尝试迭代JSON对象userTypes。

对于下面的代码：

在第一个ng-repeat中：

{{user.type}}输出\'Parent\'(如预期)，

{{user.options}}输出\'[{\"option1\":\"11QWERT\",\"option2\":\"22QWERT\"}]\'(如预期)。

但在第二个ng-repeat中，我无法迭代user.options并输出每个{{options}}

应该改变什么以在第二个ng-repeat中得到option1和option2作为输出结果？

JS片段

var userTypes = [{
    "type": 'Parent',
    "options": [{
        "option1": "11QWERT",
        "option2": "22QWERT"
    }]
}]

HTML片段

  • {{user.type}}

     

    {{user.options}}

     

  • {{option}}

     

  •  

 

admin 更改状态以发布 2023年5月20日
0

2 答案

0 Comments

对于这个特定的 JSON 输入，应该是这样的：

  • 
    
    
        {{option.option1}}
        {{option.option2}}
    
    

    •

    但是正如你所说你想要不固定数量的选项，更新你的 JSON 如下：

    "options":["11QWERT","22QWERT"]

    然后你的代码应该按照你想要的方式工作。

    你可以在每个新元素之前用简单的逗号将其添加到列表中。

    0
    0 Comments

    将您的子标签

  • 替换为
      ，然后可以这样迭代user.options：

    • 
    
      {{user.type}}
      
    
        
        
        {{key}}: {{value}}
        
    
      

      •

      或者如果您的options可能包含多个对象：

    • 
    
      {{user.type}}
      
    
        
        
      • {{key}}: {{value}}
        • 
    
      

      •

      如果您不需要对象键：

        
    
      • {{item}}
        •

      Fiddle

      扩展解释：

      在您的示例中，您在另一个

    • 标签内部使用了一个
    • 标签：

    • 
    
    • 
    
      •

      • 由于这不是有效的HTML，浏览器将把这个标记解释为以下内容:

    • 

      • 

    • 

      •

      由于ng-repeat为每次迭代创建新的作用域，您无法在第二个ng-repeat中访问user变量，因此迭代器不会运行。

    • 0