Question

我有一个带有可排序列的表（标题图标根据排序存在和方向确定）：

<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>

我觉得我在ng-class中的使用是不好的做法，我该如何改进呢？如何避免重复检查而不重复“患者姓名”和＃39;因为我需要其他具有不同名称的列，所以一次又一次地使用该字段。

非常感谢。

Answer 1

逻辑部分可以在控制器中完成：

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

然后在你看来：

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

Answer 2

您的控制器将使用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 '';
}

使用ng-class的更好方法

2 个答案: