javascript - AngularJS 数组未被 ng-repeat 识别

Question

我正在 NodeJS(服务器部分)和 AngularJS( View 部分)上编写一个 API，它要求另一个 API(也是 NodeJS)获取一个包含图片数组等内容的对象。我对此数组中的图片很感兴趣。

我编写了一个 for 循环来获取对象中图片数组中包含的所有图片的名称:

for(j=0; j<reference.pictures.length; j++){
   self.url ="http://localhost:3000/api/pictures/"+reference.pictures[j].picture;
   self.urlArray = urlArray.push(self.url);
 }
 console.log(urlArray);

我为自己的观点写了一篇 ng-repeat:

<div ng-repeat="url in urlArray">
  <img ng-src="{{url}}"  width="150px"/>
  <br/>
</div>

我的问题？当我 console.log 时，我可以看到日志中的 url 数组中包含的 url，但我无法使用 ng-repeat 在 View 中看到它们。我猜我的 ng-repeat 并不完美，但仍然不知道为什么 有任何想法吗 ？

为了理解，我想显示数组中包含的所有图片，所以我首先这样做了:

Controller :

    self.url = "http://localhost:3000/api/pictures/"+reference.pictures[j].picture;

查看:

<div ng-repeat="picture in reference.pictures">
  <img ng-src="{{url}}"  width="150px"/>
  <br/>
</div>

结果我有很多图片，但是用于获取图片的 URL 是退出循环时分配的最后一张，所以我所有的图片都是相同的(最后一张)，这就是为什么我想到用所有不同的 URL 创建一个数组

Answer 1

您缺乏将urlArray构造为对象文字数组，即:

[
  { url: 'someUrl' }, 
  { url: 'anotherUrl' },
  ...
]

所以这样做:

self.urlArray = [];
for(j=0; j<reference.pictures.length; j++) {
  self.urlArray.push({
    url: "http://localhost:3000/api/pictures/"+reference.pictures[j].picture
  })
}

...

<div ng-repeat="url in urlArray">
  <img ng-src="{{ url.url }}" width="150px">
  <br>
</div>