How to ng-reapeat with multiple key values in angularjs?

Question

Hi i have object of multiple keys and values

The Response object has the follwing :

    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"

This is my angular code :

   $scope.data = response;

And this is my html code :

    <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>

Can anyone help me please , thanks in advance ..

May be this link helpful for stackoverflow.com/questions/21446253/… — Indresh Tayal
– Indresh Tayal, Commented Feb 10, 2017 at 10:14

Sajeetharan · Accepted Answer · 2017-02-10 10:55:32Z

2

Issue is with your ng-repeat , it should be, The child ng-repeat should have datas instead of data

 <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}}" />

DEMO

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>

edited Feb 10, 2017 at 10:55

answered Feb 10, 2017 at 10:26

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Elamparithi.P Over a year ago

how can you get this ID("id": 5454554,)

Sajeetharan Over a year ago

did it help to sort the issue?

Elamparithi.P Over a year ago

i not have Array object for $scope.data , i only have object .

Elamparithi.P Over a year ago

send ur email id i will send u teamviewer id

Sajeetharan Over a year ago

Let us continue this discussion in chat.

Vijay Kumar Mahar · Accepted Answer · 2017-02-10 10:20:29Z

0

In your case you have to get url data in one variable so you get only images. check following example $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"**

answered Feb 10, 2017 at 10:20

Vijay Kumar Mahar

594 bronze badges

1 Comment

Vijay Kumar Mahar Over a year ago

try this one <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}}" />

Collectives™ on Stack Overflow

How to ng-reapeat with multiple key values in angularjs?

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related