Iterate over multiple array elements

Question

I want to iterate over multiple array elements named urls and names. Below is the code where only urls are iterated. How can I use names also with urls?

JS

var app = angular.module('plunker',[]);
app.controller('Nav', function($scope) {
      $scope.names = [
          {
            "name" : "myname 1",
          },
          {
             "name": "myname 2"
          }  
      ]
      $scope.urls = [
          {
            "url" : "http://google.com",
          },
          {
             "url": "http://cnn.com"
          }
     ]; 
});

HTML

 <body ng-controller="Nav">
    {{urls}}
    {{names}}
    <div ng-repeat="link in urls">
        <input type="text" ng-model="link.url" />
        <input type="text"  />  //Want name here
    </div> 
 </body>

Plnkr : http://plnkr.co/edit/OXXdFK2JElVaAh0uYmxG?p=preview

Jeremy Zerr · Accepted Answer · 2013-12-31 07:28:55Z

3

See answer in this plunker: http://plnkr.co/edit/OhnEpFjUVfLVUQw4TP3Z?p=preview

Add the ng-model like this:

<input type="text" ng-model="names[$index].name"/>

Every ng-repeat has some special properties exposed on local scope, see: http://docs.angularjs.org/api/ng.directive:ngRepeat

The one we are using is:

$index - iterator offset of the repeated element (0..length-1)

So as long as both arrays have the same length, this should work.

answered Dec 31, 2013 at 7:28

Jeremy Zerr

8848 silver badges13 bronze badges

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

Comments

Developer Marius Žilėnas · Accepted Answer · 2013-12-31 07:08:48Z

1

Can you change the code:

var app = angular.module('plunker',[]);
app.controller('Nav', function($scope) {
      $scope.names = [
          {
            "name" : "myname 1",
          },
          {
             "name": "myname 2"
          }  
      ]
      $scope.urls = [
          {
            "url" : "http://google.com",
          },
          {
             "url": "http://cnn.com"
          }
     ]; 
});

to var app = angular.module('plunker',[]); app.controller('Nav', function($scope) { $scope.urls = [ { "name" : "myname 1", "url" : "http://google.com" }, { "name": "myname 2", "url": "http://cnn.com" }
] });

then in your HTML

<body ng-controller="Nav">
    <div ng-repeat="url in urls">
        <label>{{url.name}}<input type="text" ng-model="url.url" /></label>
    </div> 
  </body>

http://plnkr.co/edit/6ne9jetDZTt4QhPctUpq?p=preview ?

answered Dec 31, 2013 at 7:08

Developer Marius Žilėnas

6,1372 gold badges46 silver badges76 bronze badges

1 Comment

user1184100 Over a year ago

Thanks for the reply Marius, but that's currently not possible else would have done it.

Collectives™ on Stack Overflow

Iterate over multiple array elements

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related