如何在angularjs中使用多个键值进行ng-reapeat?

时间:2017-02-10 10:12:48

标签: javascript jquery angularjs

嗨我有多个键和值的对象

Response对象具有以下内容:

    Object
    MainID:"589d8ddaf7045b29b5101cdc"
    Url:Array[5]
    0:Object
        _id:"589d8ddaf7045b29b5101cdd"
        url:"images/product_images/file-1486720474060.jpeg"
    1:Object
        _id:"589d8e1d142ef52a4ffb8285"
        url:"images/product_images/file-1486720541230.jpeg"
    2:Object
        _id:"589d8eda142ef52a4ffb8288"
        url:"images/product_images/file-1486720730226.jpeg" 

这是我的角度代码:

   $scope.data = response;

这是我的HTML代码:

    <div class="add-pic-box1 col-md-3" ng-repeat="datas in data">
    <img class="thumb" ng-repeat="img in data.Url" ng-model="add_new_ads_mdl.img_add" imgid = "{{img._id}}" src="{{img.url}}" />
    <span><i class="fa fa-times" ng-click="close_img(data.url._id)"></i></span>
    </div>

任何人都可以帮助我,提前谢谢..

2 个答案:

答案 0 :(得分:1)

问题在于你的ng-repeat,应该是,孩子ng-repeat应该有数据而不是数据

 <div class="add-pic-box1 col-md-3" ng-repeat="datas in data">          
       <img class="thumb" ng-repeat="img in datas.Url" ng-model="add_new_ads_mdl.img_add" imgid = "{{img.id}}" src="{{img.url}}" />

<强>样本

angular.module('webapp', [])
  .controller('AppCtrl', function($scope) {
     $scope.data =  
   {
    "id": 5454554,
    "Url": [
      {
        "_id": "http://www.bcetupes.info/wp-json/wp/v2/posts/7194",
        "url": "https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg"
      }
    ]
  } ;
 
  });
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body ng-controller="AppCtrl">
 <div class="add-pic-box1 col-md-3">
    <div ng-repeat="img in data.Url" >
      <h1>{{data.id}}</h1>
    <img class="thumb" ng-model="add_new_ads_mdl.img_add" imgid = "{{img._id}}" src="{{img.url}}" />
      </div>
    <span><i class="fa fa-times" ng-click="close_img(data.url._id)"></i></span>
    </div>
</body>
</html>

答案 1 :(得分:0)

在您的情况下,您必须将url数据放在一个变量中,这样您才能获得图像。 检查以下示例   $ scope.data = response.Url;


    Url:Array[5]
    0:Object
        _id:"589d8ddaf7045b29b5101cdd"
        url:"images/product_images/file-1486720474060.jpeg"
    1:Object
        _id:"589d8e1d142ef52a4ffb8285"
        url:"images/product_images/file-1486720541230.jpeg"
    2:Object
        _id:"589d8eda142ef52a4ffb8288"
        url:"images/product_images/file-1486720730226.jpeg"**