Multiple ng-repeat on one element

Question

Is it possible to get the following code: -

<tr ng-repeat="data in dataArray,value in valueArray"> {{data}} {{value}} </tr> 

I have two arrays that I want to show them on the same line.
PS: I do not ask for syntax. I am looking for logic to achieve this

thanks

Like: - " http://jsfiddle.net/6ob5bkcx/1/ "

Answer 1

You must do this in the controller, not in the view. Map the dataValues ​​to the object of the key / value pair and define an array of values ​​using the index. This assumes that each data key has a corresponding value key.

Controller:

 var dataArray = []; var valueArray = []; this.repeatData = dataArray.map(function(value, index) { return { data: value, value: valueArray[index] } }); 

View:

 <tr ng-repeat="data in repeatData"> {{data.data}} {{data.value}} </tr> 

Answer 2

It fits your needs.

http://jsfiddle.net/jmo65wyn/

Your data, an array of values ​​as an array of objects

  this.obj = [{data: 'a', value :true}, {data: 'b', value:true}]; 

And you loop like that

  <div ng:repeat="o in obj"> {{o.data}} and {{o.value}} <input type="checkbox" ng:model="o.value"> </div> 

Answer 3

Angular ng-repeat does not support it, but you can write your own custom directive to suit your requirements.

Refresh section

 var traverseCollection = angular.module("CollectionTraverse", []); traverseCollection.directive("repeatCollection", function(){ return { restrict: "A", scope: { model: "=" }, controller: controller: function($scope) { var collectionList = $scope.model; angular.forEach(collectionList, function(obj, index) { angular.forEach(obj, function(data, index) { }); }); } } }); Your scope should contains the list of your collection objects : $scope.collectionList = [dataArray, valueArray]; Usage in HTML: ------------------------------------------- <div repeat_collection model="collectionList"></div> 

This directive will be generic to traverse the list of collections and yes there may be some syntax errors in the code above because I did not run it. His luck.

Answer 4

If for some reason you have two arrays with the same length and where their contents correspond ( array1[0] correspond to array2[0] , ..., array1[n] correspond to array2[n] ), you can use AngularJS track by (which was introduced for the first time in version 1.1.4 ), for example:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script> <table ng-app="" ng-init="names=['Bill','Billa','Billy']; ages=['10', '20', '30']"> <tr ng-repeat="name in names track by $index"> <td>{{ name }} is {{ ages[$index] }} years old.</td> </tr> </table> 

Hope this helps.

Answer 5

if you want something like a list with two or more items on the same line:

in html file:

 <li ng-repeat="item in items"> <i class="material-icons">{{navItem[1]}}</i>{{navItem[0]}}</li> 

in js file:

 $scope.items = [ ["Home", "home"], ["Favorite", "favorite"] ]