CODEWITHSUNDEEP
angularjsloopsangularjs-directiveangularjs-ng-repeat
anukuls
anukuls

Reputation: 285

Implementing ng-repeat for 2 parameters

I am trying to print a list which has 2 elements (binded dynamically)taken from 2 different arrays.

Following is my code: scopehie.html

<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="scopehie.js"></script>

<body ng-app="myApp">
    <div ng-controller="parentCtrl">
        Hello {{name}} !! </br></br>
    </div>
    <div ng-controller="childCtrl">
        <ol>
            <li ng-repeat-start="name in names", ng-repeat-end="dept in department">{{name}} from {{dept}}</li>
        </ol>
    </div>
</body>

</html>

scopehie.js

var app = angular.module('myApp' , []);

app.controller('parentCtrl', function($scope, $rootScope){
    $scope.name = 'World';
    $rootScope.department = 'Angular' ;
}) ;

app.controller('childCtrl' , function($scope){
    $scope.names = ['A' , 'B' , 'C' , 'D'];
    $scope.department = ['M' , 'N' , 'O'];

});

The problem is that my first parameter i.e "name in names" is looping but the second parameter i.e "dept in department" is not looping , infact it is not showing at all.

Output shown :

Hello World !!

1.A from
2.B from
3.C from
4.D from

Output required :

Hello World !!

1.A from M
2.B from N
3.C from O
4.D from P

Kindly suggest something.

Upvotes: 3

Views: 467

Answers (4)

vamsikrishnamannem
vamsikrishnamannem

Reputation: 4847

working example here

<body ng-app="myApp">
  <div ng-controller="parentCtrl">
    Hello {{name}}
    <br>
  </div>
  <div ng-controller="childCtrl">
    <ol>
      <li ng-repeat="name in names">
        {{name}} from {{department[$index]}}
        <br>
      </li>
    </ol>
  </div>
</body>

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

If there is one to one mapping between names and department then you can do in this way.

<li ng-repeat="name in names">{{name}} from {{department[$index]}}</li>

Upvotes: 0

binariedMe
binariedMe

Reputation: 4329

Use something like this : 

<ol>
   <li ng-repeat="name in names">  
   {{name}} from {{department[$index]}}</li>
</ol>

The thing is you can use ng-repeat on just one veriable. While ng-repeat-start and -end is for repeating a block of html tags instead of just one tag. So...

Upvotes: 0

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

try this simple $index way 

<li ng-repeat="dept in department">{{names[$index]}} from {{dept}}</li>

You can do it by using ng-repeat only. not needed start and end .

Upvotes: 1

Related Questions