如何在AngularJS中使用ng-repeat迭代键和值？

Question

在我的控制器中,我有以下数据: $scope.object = data

现在这个数据是带有键和值的字典json.

我可以object.name在模板中访问该属性.有没有什么方法可以迭代键,并在表格中显示它们

<tr><td> {{key}} </td> <td> data.key </td>

数据是这样的

{
    "id": 2,
    "project": "wewe2012",
    "date": "2013-02-26",
    "description": "ewew",
    "eet_no": "ewew",
}

Answer 1

怎么样:

<table>
  <tr ng-repeat="(key, value) in data">
    <td> {{key}} </td> <td> {{ value }} </td>
  </tr>
</table>

此方法列在文档中:https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 2

如果您想使用双向绑定编辑属性值:

<tr ng-repeat="(key, value) in data">
    <td>{{key}}<input type="text" ng-model="data[key]"></td>
</tr>

Answer 3

我不认为有角度的内置函数可以做到这一点,但你可以通过创建一个包含所有头名称的单独的scope属性来实现,你可以像这样自动填充这个属性:

var data = {
  foo: 'a',
  bar: 'b'
};

$scope.objectHeaders = [];

for ( property in data ) {
  $scope.objectHeaders.push(property); 
}

// Output: [ 'foo', 'bar' ]

Answer 4

我们可以按照以下过程来避免键值按字母顺序显示。

Java脚本

$scope.data = {
   "id": 2,
   "project": "wewe2012",
   "date": "2013-02-26",
   "description": "ewew",
   "eet_no": "ewew",
};
var array = [];
for(var key in $scope.data){
    var test = {};
    test[key]=$scope.data[key];
    array.push(test);
}
$scope.data = array;

的HTML

<p ng-repeat="obj in data">
   <font ng-repeat="(key, value) in obj">
      {{key}} : {{value}}
   </font>
</p>