Question

对于如何使用angular.js在嵌套数组中创建和引用项目有点困惑。我以为我能做到：

$scope.zones = [ {z:'north'}, {z:'south'} ];
$scope.zones.times = [ {t:'noon'}, {t:'midnight'} ];
$scope.zones.times.places = [ {p:'here'}, {p:'there'} ];

和angularjs将创建一个结构，其中每个区域有两次，每次都有两个位置。

然后我可以使用类似的东西：

<ul ng-repeat="zone in $scope.zones">
    <li>{{zone.z}}</li>
    <ul ng-repeat="time in zone.times">
        <li>{{time.t}}</li>
        <ul ng-repeat="place in time.places">
            <li>{{place.p}}</li>
        </ul>
    </ul>
</ul>

查看我页面上的树状结构。

那么，使用上面的点符号实际上是否创建了一个嵌套的对象数组？我应该能够以递归的方式引用它们吗？＃34;如上面的指令？我在前两个级别之后无法正常工作。

Answer 1

您没有正确设置数据。它应该是：

$scope.zones = [ {z:'north'}, {z:'south'} ];
$scope.zones[0].times = [ {t:'noon'}, {t:'midnight'} ];
$scope.zones[1].times = [ {t:'noon'}, {t:'midnight'} ];

Etc...

然后您的HTML应该按预期工作。

Answer 2

在使用obj.propName的JavaScript中，访问propName引用的对象名为obj的属性。

数组也是对象（在JavaScript中），所以这些代码行：

$scope.zones = [...];
$scope.zones.times = [...];

创建一个数组（名为zones）并为其指定一个名为times的属性（也是一个数组）。

_{注意：这是特定于JavaScript的，与Angular无关。}

这不是你想要的。您想将times属性提供给zones＆＃39;项目，不到zones本身。（与places类似。）
为了实现这一点，您需要迭代每个数组的元素并为其提供额外的属性。

var places = [{p: 'here'},  {p: 'there'}];
var times  = [{t: 'noon'},  {t: 'midnight'}];
var zones  = [{z: 'north'}, {z: 'south'}];

// Give each `time` a `places` property
times.forEach(function (time) {
    time.places = places;
});

// Give each `zone` a `times` property
// (Each `time` already has a `places` property.)
zones.forEach(function (zone) {
    zone.times = times;
});

// Assign the augmented `zones` to `$scope.zones`
$scope.zones = zones;

另请参阅此 short demo 。

<子> 注意：
在上面的实现中，值通过引用传递。这意味着您更改了$scope.zones[0].times[0].places[0]，$scope.zones[1].times[1].places[0]也会受到影响，因为它引用了同一个对象。
如果您只是想读取值，这种实现就可以了，因为它更有效率如果您还希望能够修改对象，则需要创建对象的副本，而不是通过引用分配它们。

<子> 例如，而不是time.places = places;和zone.times = times;
分别写time.places = angular.copy(places);和zone.times = angular.copy(times);。

生成的$scope.zones对象看起来像这样：

[{ "z": "north", "times": [{ "t": "noon", "places": [ {"p": "here" }, {"p": "there"} ] }, { "t": "midnight", "places": [ {"p": "here" }, {"p": "there"} ] }] }, { "z": "south", "times": [{ "t": "noon", "places": [ {"p": "here" }, {"p": "there"} ] }, { "t": "midnight", "places": [ {"p":"here" }, {"p":"there"} ] }] }]

<子> 注意：
在您的HTML代码中，您引用了$scope.zones。这是一个错误！
核心方式是：zones
（所有Angular表达式都在当前Scope的上下文中进行评估，因此ng-repeat="zone in $scope.zones"将查找$scope.$scope.zones。）

angularjs会自动创建嵌套结构吗？

2 个答案: