2015-09-07 28 views
2

我有一個表可排序列(根據排序存及其方向的頭圖標確定):更好的方式來使用納克級

<table border="1"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th ng-click="sort(studies, 'PatientName')" class="sortable" 
      ng-class="{'ascending': sortingField == 'PatientName' && sortingDirection == 'asc' , 
         'decending': sortingField == 'PatientName' && sortingDirection == 'desc' }">PatientName</th> 
     </tr> 

我覺得我在納克級使用的是不好的做法,我該如何改進它?
我該如何避免重複檢查,並且不需要重複'PatientName'字段,因爲我需要使用不同名稱的其他列。

非常感謝。

回答

3

邏輯部分可以在控制器來完成:

if (sortingField == "PatientName") { 
    $scope.headerClass = sortingDirection == "asc" ? "ascending" : "descending"; 
    // or even: 
    // $scope.headerClass = sortingDirection + "ending"; 
} 

然後在您的視圖:

<th ng-class="headerClass" ...></th> 
+0

謝謝,但我仍然需要保持變量爲每個列,我能避免它的基礎上實際上只有一個字段可以 –

+0

@DorCohen您可以使用一個對象:'ng-class =「headerClass ['PatientName']」'。您的控制器將負責填充陣列。 – sp00m

0

你的控制器將有getClass方法,將決定類。

標記

ng-class="getClass(sortingField, sortingDirection)" 

代碼

//this list will be somewhere in controller 
var sortFieldList = ['PatientName', 'PatientAge'] //this list will have multiple elements 
$scope.getClass = function(sortingField, sortingDirection){ 
    var className; 
    if(sortFieldList.indexOf(sortingField) && !sortingDirection) 
    switch(sortingDirection){ 
     case "asc": 
     className = 'ascending'; 
     break; 
     case "desc" 
     className = 'descending'; 
     break; 
    } 
    return className; 
    return ''; 
} 
+2

爲什麼''asc「+」ending「trick?這是一種人爲依賴。 「開關/外殼」在這裏更適合IMO。 –

+0

@SergioTulentsev謝謝你的建議..我更新了我的代碼.. –