прогресс таблицы сортировки в угловом

Question

Моя проблема заключается в сортировке таблицы в угловом формате, где у меня есть столбец, который показывает прогресс в x/x, например. 3/10

У меня есть заголовок, который меняет столбец сортировки на этот столбец при нажатии, но когда я нажимаю на него, он не отменяет сортировку по своему усмотрению.

стол:

<table ng-controller="tabledata"> 
    <thead> 
     <tr> 
      <th ng-click="sortcol='name'">Name 
       <span ng-if="reverse && sortcol=='name'" ng-click="reverse=!reverse">▲</span> 
       <span ng-if="!reverse && sortcol=='name'" ng-click="reverse=!reverse">▼</span> 
      </th> 
      <th ng-click="sortcol='progress'">Progress 
       <span ng-if="reverse && sortcol=='progress'" ng-click="reverse=!reverse">▲</span> 
       <span ng-if="!reverse && sortcol=='progress'" ng-click="reverse=!reverse">▼</span> 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="item in items | orderBy:sortcol:reverse"> 
      <td>{{item.name}}</td> 
      <td>{{item.progress}}</td> 
     </tr> 
    </tbody> 
</table> 

контроллер:

module.controller('tabledata',['$scope',function($scope){ 
    $scope.reverse = false; 
    $scope.sortcol = 'name'; 
    $scope.items = [{"name":"item1","progress":"1/20"},{"name":"item2","progress":"5/10"},{"name":"item3","progress":"2/10"}]; 
}]); 

поэтому, когда он не отменил его следует сортировать:

item1 1/20
item3 2/10
item2 5/10

и при обратном:

item2 5/10
item3 2/10
item1 1/20

или наоборот, я действительно не волнует

, но ничего не изменилось, и сортировка остается неизменной, отменяется или не отменяется! (Я могу получить его сортировать по имени, без проблем)

Я попытался сделать функцию и установить ng-click = "sortcol = 'sortPercent'" в заголовок таблицы и добавить следующую функцию к контроллеру , но функция никогда не вызывается при нажатии. (Я попытался добавить console.log в функцию, и он никогда не отображался).

$scope.sortPercent = function(data){ 
    var pdata = data.progress.split("/"); 
    return (pdata[0]-pdata[1]); 
} 

любая помощь будет оценена :-)

приветствий
c_bb

Answer 1

Ваша проблема заключается в ng-if используется вместо ng-show. ng-if не работает в сочетании с ng-click, потому что ng-if фактически определяет его собственного $scope

<span ng-show="reverse && sortcol=='name'" ng-click="reverse=!reverse">▲</span> 
<span ng-show="!reverse && sortcol=='name'" ng-click="reverse=!reverse">▼</span> 

plunker Работы