AngularJS ng-repeat in two dimensional array

Question

I want to use ng-repeat inside div like this :

<li ng-repeat="image in HomeCtrl.images.data" >
    <a ng-href="@{{ image.code }}"><img ng-src="@{{ image.url }}" ></a>
</li>

Here is images array :

{
  "data": {
    "url": [
      "https://url1.com",
      "https://url2.com"
    ],
    "code": [
      "3cs14vs4",
      "512631va"
    ]
  }
}

images array is inside HomeCtrl

So what is the problem, it doesnt work? Are you getting error? — styopdev
– styopdev, Commented Nov 29, 2016 at 13:37
I am not getting expected results , it shows the entire code array in ng-src , same for url — trying to learn
– trying to learn, Commented Nov 29, 2016 at 13:38

Yossi Neiman · Accepted Answer · 2016-11-29 13:42:41Z

2

You should do it in a view that is already assigned to the controller, If your in a different controller you can do something like that:

<ul ng-conroller="HomeCtrl">
  <li ng-repeat="image in images.data.url track by $index" >
    <a ng-href="{{ images.data.code[$index] }}">
       <img ng-src="{{ image.data.url[$index] }}" >
    </a>
  </li>
</ul>

Keep in mind that the order of the element should be in sync

Aside from your question I think a better data structure should be as following:

{
 {"code": "xx", "url": "yyy"},
 {"code": "xx", "url": "yyy"},
 {"code": "xx", "url": "yyy"},
 ....
}

answered Nov 29, 2016 at 13:42

Yossi Neiman

8251 gold badge7 silver badges13 bronze badges

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

1 Comment

trying to learn Over a year ago

As far as I can see, I should use this data structure to get this code working . Thank you!

J-Mean · Accepted Answer · 2016-11-29 13:58:04Z

1

Please find following working snippet.

(function(angular) {
  'use strict';
angular.module('app', [])
  .controller('ExampleController', ['$scope', function($scope) {
    //Change your Json Object
    $scope.images = { 
   "data":[
     {"url":  "https://url1.com","code":"3cs14vs4"},
     {"url":  "https://url2.com","code":"512631va"}
   ],
}  
    
    
    
 }]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
  
</head>
<body ng-app="app">
  <div ng-controller="ExampleController">  
  
 <ul>
 <li ng-repeat="image in images.data" >
    <a ng-href="{{ image.code }}"><img ng-src="{{ image.url }}" ></a>
</li>
</ul>
    
</div>
</body>
</html>

Note: Had changed your object data structure.

answered Nov 29, 2016 at 13:58

J-Mean

1,2101 gold badge9 silver badges15 bronze badges

2 Comments

trying to learn Over a year ago

Thank you for helping me , I appreciate it . Right now i am trying to change data structure in PHP.

J-Mean Over a year ago

Okay!! Welcome :)

Collectives™ on Stack Overflow

AngularJS ng-repeat in two dimensional array

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related