Clever Geek Handbook

Implementing ng-repeat for two parameters

I am trying to print a list that has 2 elements (dynamically linked) taken from two different arrays.

Below 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 my first parameter ie "name in names" is a loop, but the second parameter ie "dept in department" is not looping, infact it doesn't show at all.

Shown result:

Hello World !!

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

Desired output:

Hello World !!

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

Please suggest anything.

+3


source to share


4 answers


try this simple way $index 

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


You can do this using only ng-repeat

. no need to start and finish.

+1


source


Use something like this:

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


The point is, you can only use ng-repeat at one level. Although ng-repeat-start and -end are meant to repeat a block of html tags instead of a single tag. So that...

0


source


If there is one-to-one between the names and the department , then you can do this.

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

0


source


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


source






More articles:


All Articles