javascript - 如何在 Angular 中加载嵌套数组？

Question

我有一些正在使用的代码的代码笔。我想通过服务加载 json 数据，然后使用 ng-repeat 加载数组。

问题是它可以很好地加载第一个数组。但是，嵌套数组“data.cities”没有出现。在控制台中，它指出其递归过多。这是下面的链接和代码。

Codepen Link

html

<div ng-app="myApp" ng-controller="nameController">
<div class="container">
    <div class="row">
        <div class="col-md-12">

            <div ng-repeat="r in data">
                <div>{{ r.region }} - x: {{ r.x}}, y: {{r.y}} ---- {{ r.desc}}</div>
                <div ng-repeat="city in data.cities">{{city.name}}</div>
                <div>
                </div>
            </div>

        </div>
    </div>
</div>

JS

var app = angular.module("myApp", []);

app.controller("nameController", function($scope, mapService) {
$scope.data = mapService.mapData();
});

app.service("mapService", function() {

var mapInfo = [{
    region: "America",
    desc: "Some info about America",
    x: 50,
    y: 200,
    cities: [{
        name: "Chicago",
        x: 20,
        y: 232
    }, {
        name: "Los Angeles",
        x: 52,
        y: 124
    }]
}, {
    region: "Europe",
    desc: "Some info about Europe",
    x: 10,
    y: 24,
    cities: [{
        name: "Chicago2",
        x: 20,
        y: 232
    }, {
        name: "Los Angeles2",
        x: 52,
        y: 124
    }]
}, {
    region: "China",
    desc: "Some info about China",
    x: 88,
    y: 126,
    cities: [{
        name: "Chicago3",
        x: 20,
        y: 232
    }, {
        name: "Los Angeles3",
        x: 52,
        y: 124
    }]
}];

this.mapData = function() {
    /*angular.forEach(pics, function(value, key) {
     //console.log("key", value.name);
      return value.name;
    });*/
    return mapInfo;
};

});

Answer 1

只更新这一行

<div ng-repeat="city in r.cities">{{city.name}}</div>

http://jsfiddle.net/L01rjepb/