转换对象的数组HTML表角

我有这样的对象的列表：转换对象的数组HTML表角

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>

表格被正确显示，但是当我点击标题对列进行排序时，什么也没有发生。如果你有一些建议，并感谢您的时间。

来源

2017-01-04 Augustin Chini

如果你尝试将你的数据吗？ –

创建一个小提琴：https：//jsfiddle.net/ – mikeb

谢谢你的回答:)你可以找到jsfiddle [这里]（https://jsfiddle.net/cfhzub2y/） –

不是直接在ng-click中放置代码，而是在控制器中创建一个函数。这是一个控制器！

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

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

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

来源

2017-01-04 17:47:39

谢谢你的回答，我没有'知道点击不允许多条指令 –

转换对象的数组HTML表角

回答

相关问题