json - 使用 ng-repeat 在 AngularJS 中打印嵌套的 JSON 数组值

Question

我需要使用带有 ng-repeat 的 AngularJS 访问以下 json 文件数组中的“city”和“nation”的值。

这是我的 Json 文件:

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

        ],
        "visibility": 1
      }
]

我的问题是我需要获取城市和国家作为文本字符串值，因为我需要将它们添加为标签内的 css 类名，基本上是这样的:

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

我不知道该怎么做。

我试过这段代码，但没有显示任何内容:

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

提前感谢您的建议。

Answer 1

正如@MattDionis 所说，您需要指定 ng-class，而不仅仅是 class。您可以尝试使用 ng-class 的函数。所以你可以这样做

<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;
}

我确信有比这更好的方法来组合它们，但这就是我想出的方法