Question

我正在NodeJS（服务器部分）和AngularJS（视图部分）上编写一个API，该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视图中看不到它们。我猜我的ng-repeat并不完美，但仍然不知道为什么有任何想法吗？

要了解，我想显示阵列中包含的所有图片，因此首先我这样做了：

控制器：

    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是最后一个被分配退出循环的图片，所以我所有的图片都是相同的（最后一个），这就是为什么我得到用我所有不同的网址制作数组的想法

Answer 1

我假设您是使用$scope来引用self。如果是这样，您的代码的主要问题就是该分配：

self.urlArray = urlArray.push(self.url);

Array#push返回更新后的数组的长度，因此self.urlArray将始终包含一个整数。而且，您无法在AngularJS中使用ng-repeat遍历一个整数。要解决此问题，只需删除任务：

urlArray.push(self.url);

Answer 2

您缺乏将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>

Answer 3

Angular中有一些原型继承的细微差别-请查看this post，以获得更深入的解释。

基本上，您的ng-repeat无法访问所需的urlArray，因为在childScope中创建了一个新变量，它使{em>中的相同变量 {1}}。如果您要将parentScope设置为对象的属性，则应该可以解决您的问题。

ng-repeat

3 个答案: