Roger Liao Roger Liao - 4 months ago 14
AngularJS Question

Iterating over object properties with arrays

here is my data structure:

$scope.table = {
a: ["1","2","3","4"],
b: ["5","6","7","8"]
};


and i can loop through the keys with ng-repeat:

<tr ng-repeat="(key,value) in table">
<td>{{key}}</td> <!-- display a, b-->
<td ng-repeat="???"></td>
</tr>


I also want to loop through the values array after the key, how should I continue?

Thank you!

Answer

If you want to loop over the array inside the properties, you can do the following:

angular.module('app', [])
  .controller('mainCtrl', function($scope) {
    $scope.table = {
                    a: ["1","2","3","4"],
                    b: ["5","6","7","8"]
               };
  });
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <table>
    <tr ng-repeat="(key, values) in table">
      <td ng-bind="key"></td>
      <td ng-repeat="value in values" ng-bind="value"></td>
    </tr>
  </table>
</body>

</html>

Comments