轉換對象的數組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表角

回答

相關問題