基于范围数组格式化html中的文本

时间:2017-10-16 05:51:38

标签: angularjs html5

我有一个范围数组

$scope.myArr = [{'id':'1','vehicle':'car'},{'id':'1','vehicle':'bike'}]

我需要在我的html页面中显示这些数据,如下所示

 |id|vehicle|
 |--|-------|
 |1 |car    |
 |2 |bike   |

我有什么办法可以做到这一点。

1 个答案:

答案 0 :(得分:0)

像这样使用ng-repeat,

<tr>
    <th ng-repeat="(key, val) in myArr[0]">{{ key }}</th>
  </tr>
  <tr ng-repeat="row in myArr">
    <td ng-repeat="column in row">
      {{ column }}
    </td>
</tr>

<强>样本

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.myArr = [{'id':'1','vehicle':'car'},{'id':'1','vehicle':'bike'}]
});

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myController" border="1">
  <tr>
    <th ng-repeat="(key, val) in myArr[0]">{{ key }}</th>
  </tr>
  <tr ng-repeat="row in myArr">
    <td ng-repeat="column in row">
      {{ column }}
    </td>
  </tr>
</table>
</body>