Question

我是angular.js的新手。我正在开发一个shoppingcart应用程序，我从AJAX调用的数据库中获取一个JSON对象。但是我没有得到如何使用Angular js将JSON响应中的所有图像（存储在fileLocation中的url存储在JSON中）显示在Html页面上。

这是我的代码：

我的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页面上显示。

先谢谢。

Answer 1

您的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 
})

Answer 2

ngRepeat指令未正确使用。

这对你有用..

在HTML代码中：

<li ng-repeat="item in cart._embedded.binaries">
             <h3>{{item.username}}</h3>
             <img ng-src="{{item.fileLocation}}"/>
 </li>

这是DEMO

如何使用Angular.js在页面上显示从JSON检索的图像

2 个答案: