我正在为一组流行照片执行对500px API的$http
请求。响应对象正在成功返回,但我在将返回的照片项推到视图时遇到问题。
我的控制器代码看起来像这样:
meanApp.controller 'SearchController', ['$scope', '$http', 'Global', ($scope, $http, Global) ->
$scope.global = Global
$scope.photos = []
$scope.submit = ->
if $scope.text
$http.get("https://api.500px.com/v1/photos?feature=popular").success (data) ->
$scope.photos.push data
]
响应对象(作为JSON)看起来像这样(为简洁起见而减少):
{
"current_page":1,
"total_pages":1449,
"total_items":7244,
"photos":[
{
"id":58494612,
"user_id":1795149,
"name":"Van Gogh!!!!"
},
{
"id":49566952,
"user_id":1795149,
"name":"Autumn touch!"
},
{
"id":49527034,
"user_id":2670757,
"name":"Untitled"
},
{
"id":39374598,
"user_id":3669660,
"name":"The Wild Cannot Be Tamed Nor The Rednecks in it! "
},
{
"id":28303657,
"user_id":2843749,
"name":"Main road to go to the moon"
}
]
}
我的视图是这样的:
<h1>Photo search</h1>
<form ng-submit="submit()" ng-controller="SearchController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text">
<input type="submit" id="submit" value="Submit">
</form>
<ul>
<li ng-repeat="photo in photos.photos">{{photo.name}}</li>
<li ng-hide="photos.length">No photos</li>
</ul>
当前的行为是<ul>
不更新。预期的行为是将photo
项推到<li>
项。我已经读到可能需要使用$apply
,但这也没有给我任何运气。
更新
问题是你的ng-repeat
在SearchController
的范围之外
<form ng-submit="submit()" ng-controller="SearchController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text">
<input type="submit" id="submit" value="Submit">
</form> <!-- end SearchController -->
<ul>
<!-- Outside of SearchController's scope -->
<li ng-repeat="photo in photos.photos">{{photo.name}}</li>
<li ng-hide="photos.length">No photos</li>
</ul>
所以它不能访问photos.photos
的值
作为一种解决方案,您可以将整个"照片搜索"节,包括搜索和结果,在一个控制器的范围内。
演示你可能还需要考虑我之前的回答…
以前的响应
似乎在响应您的请求后,通过将结果推送到$scope.photos
作为数组,其内容可能看起来像:
[{ current_page: ..., photos: [...], total_items: ..., totalpages: ...}]
如果是这种情况,您需要使用如下表达式访问它:
<li ng-repeat="photo in photos[0].photos">
也许你真的想给$scope.photos
分配数据,比如
$scope.photos = data
在这种情况下,您的表达式可能会像当前一样工作
首先确保您的响应可作为Javascript对象使用。试着
console.log(data);
console.log($scope.photos);
在你的$http的成功函数。get,看看data是一个JavaScript对象还是一个对象数组(在浏览器的JS控制台中)。如果它显示为字符串,则需要使用
对响应进行JSON解析。JSON.parse(response);
,然后再压入数组。请注意,您要推入$作用域的东西。Photos数组必须是一个照片对象。console.log($scope.photos)应该显示数组对象。最后,在推送数据之后,您需要运行
$scope.apply();