CODEWITHSUNDEEP
angularjs
Dor Cohen
Dor Cohen

Reputation: 17080

Better way to use ng-class

I have a table with a sortable columns (the header icon determine according to the sorting existance and direction):

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

I feel my use in ng-class is bad practice, how can I improve it?
How can I avoid duplication of check and not repeating the 'PatientName' field again and again since I need to other column with different names.

many thanks.

Upvotes: 2

Views: 50

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Your controller will have getClass method that will decide class.

Markup

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

Code

//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 '';
}

Upvotes: 0

sp00m
sp00m

Reputation: 48817

The logical part could be done in the controller:

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

Then in your view:

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

Upvotes: 3

Related Questions