如何使用Angular.js在页面上显示从JSON检索到的图像
如何使用Angular.js在页面上显示从JSON检索到的图像
提问于 2015-03-02 14:59:30
我是angular.js的新手。我正在开发一个购物车应用程序，我从AJAX调用从数据库获得一个JSON对象。但我不知道如何显示所有的图像(网址存储在JSON的fileLocation中)从JSON的响应到超文本标记语言页面使用Angular js。
下面是我的代码：
我的JSON
{
"_embedded": {
"binaries": [
{
"fileLocation": "http://images.clipartpanda.com/sports-equipment-clipart-black-and-white-soccer-ball-hi.png",
"username": "testuser3",
"description": "The company required the 28-year-old's help on a matter the directors felt could affect the share price: its Wikipedia page. Short, uninteresting ."
},
{
"fileLocation": "http://images.clipartpanda.com/sports-equipment-clipart-black-and-white-soccer-ball-hi.png",
"username": "Sumanth",
"description": "Sample"
},
{
"fileLocation": "http://images.clipartpanda.com/sports-equipment-clipart-black-and-white-soccer-ball-hi.png",
"username": "as",
"description": "as"
}
]
}
}JSON分配给变量数据
我的Angularjs控制器：
myAppDirectives.
controller('MainCtrl', function ($scope,$http,dateFilter) {
$http({ method: 'GET', url: 'http://localhost:8087/sportsrest/binaries/' }).success(function (data) {
var result = data;
var json=JSON.stringify(result);
var data = JSON.parse(json);
$scope.cart = data; // response data
}).
error(function (data) {
alert("error" + data);
console.log(data);
});
});我的HTML页面：
<html lang="en" ng-app="myApp" id="ng-app">
<body ng-controller="MainCtrl">
<article class="main-content" role="main">
<section class="row">
<div class="content">
<div class="bookmarks-list">
<ul>
<li ng-repeat="data">
<h3>{{cart._embedded.binaries.username}}</h3>
<img ng-src="{{cart._embedded.binaries.fileLocation}}"/>
</li>
</ul>
</div>
</div>
</section>
</article>
</body>
</html>谁能帮助我如何迭代通过JSON对象上的所有图像并显示在HTML页面上。
提前谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-03-02 15:04:10
您的ng-repeat不在正确的变量上。它应该在cart._embedded.binaries阵列上：
<li ng-repeat="item in cart._embedded.binaries">
<h3>{{item.username}}</h3>
<img ng-src="{{item.fileLocation}}"/>
</li>另外，在您的控制器中，您可能不需要解析数据：
$http({ method: 'GET', url: 'http://localhost:8087/sportsrest/binaries/' }).success(function (data) {
$scope.cart = data; // response data
})Stack Overflow用户
发布于 2015-03-02 15:03:03
ngRepeat指令未正确使用。
这对你应该是有效的..
在HTML代码中：
<li ng-repeat="item in cart._embedded.binaries">
<h3>{{item.username}}</h3>
<img ng-src="{{item.fileLocation}}"/>
</li>这是一个DEMO
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28804231
复制相关文章
相似问题
腾讯云开发者
