Display data properly with Angular JS ng repeat

Question

I am using Angular JS table ng repeat to display values

This is my code

<div ng-app="myapp" ng-controller="FirstCtrl">
     <table border="1">
  <tr>
    <th ng-repeat="(key, val) in collectioninfo">{{ key }}</th>
  </tr>
<tr ng-repeat="row in collectioninfo">
      <td ng-repeat="(key, val2) in row">
        {{ val2 }}
      </td>
    </tr>
</table>  
</div>

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.collectioninfo = {
        "SDDD": "Working",
        "RRR": "P",
        "DateCreated": "57:52.2"
    }
});

http://jsfiddle.net/9fR23/501/

Hadi · Accepted Answer · 2017-06-21 06:49:25Z

3

Try this. collectioninfo is object so you don't need two nested ng-repeat

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope) {
  $scope.collectioninfo = {
    "SDDD": "Working",
    "RRR": "P",
    "DateCreated": "57:52.2"
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="FirstCtrl">
  <table border="1">
    <tr>
      <th ng-repeat="(key, val) in collectioninfo">{{ key }}</th>
    </tr>
    <tr>
      <td ng-repeat="(key, val2) in collectioninfo">
        {{ val2 }}
      </td>
    </tr>
  </table>
</div>

answered Jun 21, 2017 at 6:49

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

Display data properly with Angular JS ng repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related