在 Angular 中将对象的数组转换为 HTML 表答案

【问题标题】：Convert Object's array to HTML table in Angular在 Angular 中将对象的数组转换为 HTML 表
【发布时间】：2017-01-05 02:49:26
【问题描述】：

我有一个这样的对象列表：

var entryList = [
  {
    "Key1": "Value1",
    "Key2": "Value2",
    "Key3": "Value3"
  },
  {
    "Key1": "Value1",
    "Key2": "Value2",
    "Key3": "Value3"
  },
  {
    "Key1": "Value1",
    "Key2": "Value2",
    "Key3": "Value3"
  }
]

我想创建一个这样的 HTML 选项卡：

+--------+--------+--------+
|  Key1  |  Key2  |  Key3  |
+--------+--------+--------+
| Value1 | Value2 | Value3 |
| Value4 | Value5 | Value6 |
| Value7 | Value8 | Value9 |
+--------+--------+--------+

当我们点击标题时，按键对值进行排序

3/4 的代码在 html 中

<table class="table table-bordered table-striped">

<thead>
        <tr>
            <td ng-repeat="(key, value) in $ctrl.entryList[0]">
                <a ng-click="$ctrl.sortType = key; $ctrl.sortReverse = !$ctrl.sortReverse">
                    {{key}}
                    <span ng-show="$ctrl.sortType == key && !$ctrl.sortReverse" class="fa fa-caret-down"></span>
                    <span ng-show="$ctrl.sortType == key && $ctrl.sortReverse" class="fa fa-caret-up"></span>
                </a>
            </td>
        </tr>
    </thead>

    <tbody>
        <tr ng-repeat="itemFormData in $ctrl.entryList | orderBy:sortType:sortReverse | filter:searchForm">
            <td ng-repeat="(key, value) in itemFormData">{{ itemFormData[key] }}</td>
        </tr>
    </tbody>

</table>

表格已正确显示，但是当我单击标题对列进行排序时，没有任何反应。如果您有一些建议并感谢您的宝贵时间。

【问题讨论】：

如果您尝试对数据进行分组怎么办？
创建小提琴：jsfiddle.net
感谢您的回答 :) 您可以找到 jsfiddle here

标签： javascript html angularjs angularjs-ng-repeat

【解决方案1】：

不要将代码直接放在ng-click 中，而是在控制器中创建一个函数。这就是控制器的用途！

<a ng-click="selectSortType(key)">

$scope.selectSortType = function(key) {
  $scope.sortType = key; 
  $scope.sortReverse = !$scope.sortReverse;
};

https://jsfiddle.net/cfhzub2y/1/

【讨论】：

感谢您的回答，我不知道 ng-click 不允许多条指令