协慌网

登录 贡献 社区

如何在 AngularJS 中使用 ng-repeat 遍历键和值?

在我的控制器中,我有如下数据: $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",
}

答案

怎么样:

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

该方法在 docs 中列出: https://docs.angularjs.org/api/ng/directive/ngRepeat

如果要通过两种方式编辑属性值:

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

我认为在 angular 中没有内置函数可以执行此操作,但是您可以通过创建一个包含所有标头名称的单独的 scope 属性来做到这一点,并且可以像这样自动填充此属性:

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

$scope.objectHeaders = [];

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

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