ng-repeat with array of arrays

Question

I have dynamic inputData array (length can be between 0 and 10 or 15) that looks something like this:

$scope.inputData = [
    [1, 2, 3, 4, 5, 6, 7];
    [1, 2, 3, 4, 5, 6, 7];
    [1, 2, 3, 4, 5, 6, 7];
    [1, 2, 3, 4, 5, 6, 7];
    [1, 2, 3, 4, 5, 6, 7];
    [1, 2, 3, 4, 5, 6, 7];
]

I need to generate td in the table with ng-repeat so I could have an only first item from each "sub-array" in the first iteration. Then only second item from each "sub-array", etc.. So table should be

th   th   th  th  th  th
1    1    1   1   1   1
2    2    2   2   2   2
3    3    3   3   3   3
...

And ng repeat should switch indexes in each iteration.

// first iteration: 
<td ng-repeat="item in inputData track by $index">{{item[0]}}</td>
// second iteration: 
<td ng-repeat="item in inputData track by $index">{{item[1]}}</td>
...

Can I somehow solve this only using ng-repeat or should I sort my arrays in the controller?

Slava Utesinov · Accepted Answer · 2018-01-19 10:24:52Z

2

Try this:

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.inputData = [
    [1, 2, 3, 4, 5, 6, 7],
    [1, 2, 3, 4, 5, 6, 7],
    [1, 2, 3, 4, 5, 6, 7],
    [1, 2, 3, 4, 5, 6, 7],
    [1, 2, 3, 4, 5, 6, 7],
    [1, 2, 3, 4, 5, 6, 7]
  ]
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<table ng-app='app' ng-controller='ctrl'>
  <tbody>
    <tr ng-repeat='array in inputData' ng-init='parentIndex=$index'>
      <td ng-repeat='item in array'>{{array[parentIndex]}}
        <td>
    </tr>
  </tbody>
</table>

edited Jan 19, 2018 at 10:24

answered Jan 19, 2018 at 9:36

Slava Utesinov

13.5k2 gold badges21 silver badges26 bronze badges

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

9 Comments

Matija Župančić Over a year ago

Doesn't work. Now got an entire array in a row. '1, 2, 3, 4, 5'

Slava Utesinov Over a year ago

@MatijaŽupančić, are you sure, check out code snippet?

Slava Utesinov Over a year ago

@MatijaŽupančić, post your data, on which it is not work.

Manvendra Priyadarshi Over a year ago

For the given solution, row number should match column number then only the entire array will be displayed. In above case, row no.= 6 and column no.= 7. So, we cannot get the entire array as the result.

Matija Župančić Over a year ago

I've got some array before so I have solved in this way.

<tr ng-repeat="row in input.inputBuckets track by $index">         <td>{{row.key | date:'yyyy-MM-dd HH:mm:ss'}}</td>         <td ng-repeat="item in input.inputData" >{{item[$parent.$index]}}</td>       </tr>

These two arrays have the same length. And now works fine. Thanks for your help anyway.

|

Manvendra Priyadarshi · Accepted Answer · 2018-01-19 11:59:37Z

 <!DOCTYPE html>
    <html ng-app="app">
    
      <head>
        <meta charset="utf-8" />
        <title>AngularJS Example</title>
        <script data-require="[email protected]" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
        <script>
          var app = angular.module('app', []);
          app.controller('MainCtrl', function($scope) {
            var items = [
        [1, 2, 3, 4, 5, 6, 7],
        [1, 2, 3, 4, 5, 6, 7],
        [1, 2, 3, 4, 5, 6, 7],
        [1, 2, 3, 4, 5, 6, 7],
        [1, 2, 3, 4, 5, 6, 7],
        [1, 2, 3, 4, 5, 6, 7]
            ];
            
           $scope.items_transpose = transpose(items);
    
            function transpose(a) {
    
      // Calculate the width and height of the Array
      var w = a.length || 0;
      var h = a[0] instanceof Array ? a[0].length : 0;
    
      // In case it is a zero matrix, no transpose routine needed.
      if(h === 0 || w === 0) { return []; }
    
      /**
       * @var {Number} i Counter
       * @var {Number} j Counter
       * @var {Array} t Transposed data is stored in this array.
       */
      var i, j, t = [];
    
      // Loop through every item in the outer array (height)
      for(i=0; i<h; i++) {
    
        // Insert a new row (array)
        t[i] = [];
    
        // Loop through every item per item in outer array (width)
        for(j=0; j<w; j++) {
    
          // Save transposed data.
          t[i][j] = a[j][i];
        }
      }
    
      return t;
    }
            
          });
        </script>
      </head>
      <body ng-controller="MainCtrl">
        
        <table>
            <tr ng-repeat="item in items_transpose track by $index">
                <td ng-repeat="i in item track by $index">{{i}}</td>
            </tr>
        </table>
        
      </body>
    </html>

Collectives™ on Stack Overflow

ng-repeat with array of arrays

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related