如何使用AngularJS从数组创建HTML表格

Question

I have an array like-:

aw_score_list = {
    '6':99,'5.5':98,'5':93,'4.5':80,'4':56,'3.5':38,'3':15,'2.5':7,'2':2,'1.5':1,'1':1,
};  

我想将这个内容转换成HTML表格，使其变成像这样。

keys     Values
   6         99
 5.5         98 

请告诉我如何设置一个for循环

- Vipul sharma

---

使用ng-repeat。ng-repeat =“（key，val）in aw_score_list” - RIYAJ KHAN

Answer 1

请参阅ngRepeat-迭代对象属性。

假设您的数组在模板中的作用域内...

<table>
<thead>
<tr>
    <th>keys</th>
    <th>Values</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, val) in aw_score_list">
    <td>{{key}}</td>
    <td>{{val}}</td>
</tr>
</tbody>
</table>

- Phil

---

它不起作用。让我告诉你，我在我的应用程序中使用了你的代码，如下所示：<div ng-app="gre_angu_app" class="form-group" ng-controller="gre_angu_ctrl"> <!-- angular table code-->.. </div> - Vipul sharma

@vipulsharma，正如我在答案中提到的那样，我假设您在控制器中有类似$scope.aw_score_list = {...}的东西。 - Phil

哦，我怎么能按降序获取它们呢？:( - Vipul sharma

@vipulsharma 按降序获取什么？键还是值？请参考其他答案，可能会有解决方案。 - Phil

根据键的降序排序 - Vipul sharma

Answer 2

那是可能的，但如果你想保留顺序，需要类似于这样的东西：

aw_score_list_preserve_order = [    
    {key:'6'   , value:99},
    {key:'5.5' , value:98},
    {key:'5'   , value:93},
    {key:'4.5' , value:80},
    {key:'4'   , value:56},
    {key:'3.5' , value:38},
    {key:'3'   , value:15},
    {key:'2.5' , value:7},
    {key:'2'   , value:2},
    {key:'1.5' , value:1},
    {key:'1'   , value:1},
  ]

这是相当基础的ng-repeat迭代，你应该查看angular文档。

Plunker

- rabbit.aaron

---

如果您想要按降序排列，只需执行以下操作：<div ng-repeat="item in aw_score_list_preserve_order | orderBy:key:true">...</div>，如果您想要升序排列，请删除 :true 部分，并查看 orderBy 的文档。 - rabbit.aaron

请再次检查Plunker，我已经更新了我的代码。你可能需要将你的键值设为数字而不是字符串才能得到你想要的结果。 - rabbit.aaron

我无法更改数组结构... 我正在遵循@phil的方式。它也可以工作，唯一的问题是关于按键降序排序。 - Vipul sharma

您可以在代码中更改数组结构，例如 plunker。 - rabbit.aaron