Question

我正在使用Angular JS，我在使用ng-repeat指令结合routeParams和我的JSON数据中的嵌套数组时遇到了问题。

我有这个数据（work.json是文件名）：

[
{
“workName”:”Sample”,
"workLocation”:”Sample Location”,
"workDescription"Sample Description",
"workImages": ["1.png","2.png","3.png"]
},
{
“workName”:”Sample”,
"workLocation”:”Sample Location”,
"workDescription"Sample Description",
"workImages": ["4.png","5.png","6.png"]
},
]

我有这个控制器：

workControllers.controller('DetailController', ['$scope', '$http', '$routeParams', 
function ($scope, $http, $routeParams) {
$http.get('data/work.json').success(function(data) {
$scope.detail = data;
$scope.whichItem = $routeParams.itemId;
});
}]);

然后这个观点：

<div ng-model="detail">
<h1>{{detail[whichItem].workName}}</h1>
<p>{{detail[whichItem].workDescription}}</p>
</div>

<div ng-repeat="item in detail[whichItem].workImages">
<img ng-src="{{item.id}}" />
</div>

第一个div中的项目工作正常。第二个div中带有ng-repeat的项目并不奇怪，不会出现。我目前在这里有一个关于如何实现循环的猜测。

使用routeParms时如何使用ng-repeat在数据中迭代嵌套数组？ ng-repeat是我应该在这里使用的吗？

Answer 1

Joao Leal是对的，根据示例JSON数据，workImages是字符串数组。

<div ng-repeat="item in detail[whichItem].workImages">
    <img ng-src="{{item}}" />
</div>

应该工作。

为简化起见，您可以将$scope.detail设置为：

$http.get('data/work.json').success(function(data) {
    $scope.detail = data[$routeParams.itemId];
});

因此您可以在视图中的每个详细数据绑定中省略[whichItem]。

你不应该为div设置ng-model。它适用于双向绑定表单输入。没有它就可以工作。

使用routeParams和嵌套数组进行角度ng-repeat

1 个答案: