Multiple ng-repeat on single element

Question

Is this possible to achieve a code like this:-

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

I am having two arrays I want to show them in single row.
PS: I am not asking for syntax. I am looking for logic to achieve this

Thanks

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

Answer 1

You should be doing this in the controller, not in the view. Map the dataValues into a key/value pair object and reference the values array using an 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

If you have, for any reason, two arrays with the same length and where their contents are corresponding (array1[0] correspond to array2[0], ..., array1[n] correspond to array2[n]), you can use AngularJS's track by (which was introduced for the 1st time in the version 1.1.4) like this 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 that can help.

Answer 3

if you want something like a list with two or more items in the same row:

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"]
]

Answer 4

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

Update 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 list of collections and yes in the above code there can be some syntactical errors because i did not run it. Its your luck.

Answer 5

Does this suits your need

http://jsfiddle.net/jmo65wyn/

Your data, value array as object array

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

And you loop like this

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