ng-repeat - data from 4x arrays in columns

Question

i have 4 arrays with dynamic data. I want do make vertical table. Now i have this:

My code:

<table class="table table-striped">
    <tbody>
       <tr >
           <td ng-repeat="x in daneDoWykresuX">{{ x }}</td>
       </tr>
       <tr>
           <td ng-repeat="x in metodaPrzyblizona">{{ x }}</td>
       </tr>
       <tr>
           <td ng-repeat="x in metodaDokladna">{{ x }}</td>
       </tr>
       <tr>
          <td ng-repeat="x in metodaRK">{{ x }}</td>
       </tr>
    </tbody>
</table>

Can someone tell me how can i make multiple ng-repeat in row, or how can i do this?

The easiest solution might be to handle the transpose on the server side, and then deliver the data to Angular in tall format where you can handle it with a single ng-repeat. — Tim Biegeleisen
– Tim Biegeleisen, Commented Apr 14, 2017 at 9:33
What you wrote, sounds difficult. May I ask for some clues or something — Giacomo
– Giacomo, Commented Apr 14, 2017 at 9:46

Bhagyashree Chavan · Accepted Answer · 2017-04-14 09:50:19Z

2

On Client side you can make a single array of all these four arrays for example like [[1,2,3,4],[4,5,6,7],[3,4,5,6],[1,3,4,5]]

and then use bellow code for printing it : if $scope.myData = [[1,2,3,4],[4,5,6,7],[3,4,5,6],[1,3,4,5]]

<table>
    <tr ng-repeat="data in myData">
        <td ng-repeat="x in data">{{x}}</td>
    </tr>
</table>

answered Apr 14, 2017 at 9:50

Bhagyashree Chavan

214 bronze badges

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

Comments

Tim Biegeleisen · Accepted Answer · 2017-04-14 10:07:15Z

1

Define and populate a 1D array with the contents from the four arrays, in an order which will render as you want it.

$scope.array = [];
// I assume that all four arrays have the same length
// if not, replace the size with whatever you want to use
var size = daneDoWykresuX.length;
for (var i=0; i < size; ++i) {
   $scope.array[i] = {};
   $scope.array[i].first  = daneDoWykresuX[i];
   $scope.array[i].second = metodaPrzyblizona[i];
   $scope.array[i].third  = metodaDokladna[i];
   $scope.array[i].fourth = metodaRK[i];
}

Then use this HTML in your view:

<table class="table table-striped">
<tbody>
   <tr ng-repeat="x in array">
       <td>{{ x.first }}</td>
       <td>{{ x.second }}</td>
       <td>{{ x.third }}</td>
       <td>{{ x.fourth }}</td>
   </tr>
</tbody>

edited Apr 14, 2017 at 10:07

answered Apr 14, 2017 at 9:56

Tim Biegeleisen

526k32 gold badges324 silver badges399 bronze badges

Comments

tanmay · Accepted Answer · 2017-04-14 09:53:24Z

You can pick one and using an iterator function, create the vertical array like this:

$scope.arr = $scope.daneDoWykresuX.map(function(val, index) {
    return {
        daneDoWykresuX: val,
        metodaPrzyblizona: $scope.metodaPrzyblizona[index],
        metodaDokladna: $scope.metodaDokladna[index],
        metodaRK: $scope.metodaRK[index]
    }
})

or, you can drop the specific object name if you want.

Here's working example:

angular.module("myApp", [])
  .controller("myCtrl", function($scope) {
    $scope.daneDoWykresuX = [0.00, 0.02, 0.04, 1.04, 2.04, 3.04, 4.05];
    $scope.metodaPrzyblizona = [2.20, 0.02, 0.04, 1.04, 2.04, 3.04, 4.05];
    $scope.metodaDokladna = [3.30, 0.02, 0.04, 1.04, 2.04, 3.04, 4.05];
    $scope.metodaRK = [4.40, 0.02, 0.04, 1.04, 2.04, 3.04, 4.05];
    
    $scope.arr = $scope.daneDoWykresuX.map(function(val, index) {
      return {
        daneDoWykresuX: val,
        metodaPrzyblizona: $scope.metodaPrzyblizona[index],
        metodaDokladna: $scope.metodaDokladna[index],
        metodaRK: $scope.metodaRK[index]
      }
    })
  })

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

<body ng-app="myApp" ng-controller="myCtrl">
  <table class="table table-striped">
    <tbody>
      <tr ng-repeat="obj in arr track by $index">
        <td>{{obj.daneDoWykresuX}}</td>
        <td>{{obj.metodaPrzyblizona}}</td>
        <td>{{obj.metodaDokladna}}</td>
        <td>{{obj.metodaRK}}</td>
      </tr>
    </tbody>
  </table>
</body>

Collectives™ on Stack Overflow

ng-repeat - data from 4x arrays in columns

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related