Question

我有一个像这样的JSON字符串：

{"In Progress":1,"Re-assigned":0,"Completed":0,"Submitted":1,"Reviewed":0,"Assigned":0,"Unassigned":0,"Draft":1,"In Review":0}

我想把它放到一个简单的表中，格式如下：

<table>
  <thead>
    <tr>
      <th>State Name</th>
      <th>Count</th>
    </tr>
  </thead>

我应该将<tr>和<td>类作为什么？

Answer 1

$scope看起来像这样：

$scope.data = { "In Progress":1,"Re-assigned":0,"Completed":0,"Submitted":1 };

您需要在for：

中使用略有不同的ng-repeat表达式

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

请参阅：https://docs.angularjs.org/api/ng/directive/ngRepeat，了解您可以使用的替代重复表达式的示例。（在这种情况下，您将迭代单个对象上的键和值，而不是在更常见的情况下对象数组）

Answer 2

我不确定JSON对象与您尝试创建的表格的关系，但通常您要做的是使用ng-repeat指令循环像这样的JSON数组：

<table>
  <thead>
    <tr>
      <th>State Name</th>
      <th>Count</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="state in states">
      <td>{{ state.StateName }} </td>
      <td>{{ state.Count }} </td>
    </tr>
  </tbody>
</table>

'states'中的ng-repeat="state in states"引用您从Angular Controller

传入的JSON对象

Answer 3

要添加到Ed B的答案，

您应该将JSON重新格式化为如下所示的数组： [ {'StateName': 'In Progress', 'Count': 1}, ... ]

如果您在Angular代码中有权访问或解析JSON，则可以在此JSON源中进行此更改。然后，您可以使用Angular创建一个控制器：

app.controller('StateController', function() { this.states = your_json_array; }); 并使用控制器将控制器添加到HTML <table ng-controller='StateController as stateCtrl'> 和<tr ng-repeat='state in stateCtrl.states'以及Ed B显示的绑定（{{...}}）。

将JSON数据解析到表中

3 个答案: