使用Angular JS ng repeat正确显示数据

时间:2017-06-21 06:46:53

标签: angularjs

我正在使用Angular JS table ng repeat来显示值

这是我的代码

<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/

1 个答案:

答案 0 :(得分:3)

试试这个。 collectioninfo是对象,因此您不需要两个嵌套ng-repeat

&#13;
&#13;
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope) {
  $scope.collectioninfo = {
    "SDDD": "Working",
    "RRR": "P",
    "DateCreated": "57:52.2"
  }
});
&#13;
<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>
&#13;
&#13;
&#13;