打印嵌套的JSON数组值与NG重复AngularJS [英] Print nested JSON array values in AngularJS with ng-repeat

问题描述

我需要访问数组中城市和国家的价值观与使用NG-重复AngularJS以下JSON文件。

I need to access the values of "city" and "nation" inside the array the following json file using AngularJS with ng-repeat.

这是我的JSON文件：

This is my Json file:

[
      {
        "name": "first",
        "location": [
            {
                "city" : "milan",
                "nation" : "italy"
            }
        ],
        "visibility": 1
      },
{
        "name": "second",
        "location": [
            {
                "city" : "new york",
                "nation" : "usa"
            },
            {
                "city" : "london",
                "nation" : "uk"
            }

        ],
        "visibility": 1
      }
]

我的问题是我需要得到城市和国家作为文本字符串值，因为我需要将其添加为CSS类名称的标签内，基本上是这样的：

My problem is that I need to get City and Nation as text string values, because I need to add them as css class name inside a tag, basically like this:

<div class="milan italy"></div>
<div class="new york usa london uk></div>

我无法弄清楚如何做到这一点。

I'm not able to figure it out how to do this.

我试着用这个code，但没有显示：

I tried with this code but nothing is shown:

<div ng-repeat-start="tile in tiles"></div>
     <div class="mix {{ tile.location.city }} {{ tile.location.nation }}"></div>
<div ng-repeat-end></div>

感谢您提前为您的建议。

Thank you in advance for your suggestions.

推荐答案

由于@MattDionis说，你需要指定纳克级的，不只是类。你可以尝试使用纳克级的一个功能。所以，你可以做

As @MattDionis said, you would need to specify ng-class, not just class. What you can try is using a function for ng-class. So you can do

<div ng-repeat="tile in tiles">
    <div ng-class="getLocation(tile)"></div>
</div>

$scope.getLocation = function(tile) {
    var resp = '';
    for (var i = tile.location.length; i-- > 0;) {
        resp = resp + tile.location[i].city + ' ' + tile.location[i].nation;
    }
    return resp;
}

我敢肯定有更好的方法来他们比相结合，但是这就是我想出了手

I'm sure there's a better way to combine them than that, but that's what I came up with off-hand

这篇关于打印嵌套的JSON数组值与NG重复AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！