带routeParams和嵌套数组的角度ng-repeat

Question

I am using Angular JS and I am having an issue using the ng-repeat directive in combination with routeParams and a nested array within my JSON data.

I have this data (work.json is the file name):

[
{
“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"]
},
]

I have this controller:

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

Then this view.:

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

The items in the first div work fine. The items in the second div with ng-repeat, not surprisingly, do not show up. What I have here currently is a guess as to how to implement the loop.

When using routeParms how do I iterate through a nested array within my data using ng-repeat? Is ng-repeat what I should be using here?

Answer 1

Joao Leal is right, according to sample JSON data, workImages is array of strings.

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

Should work.

For sake of simplification you may set $scope.detail like:

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

so you can omit [whichItem] in every detail data binding in view.

And you should not set ng-model for div. It is intended for two-way bound form inputs. It will just work without that.