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

моя проблема заключается в сортировке таблицы в angular, где у меня есть столбец, отображающий прогресс в 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"}];
}]);

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

пункт1 1/20
пункт3 2/10
пункт2 5/10

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

пункт2 5/10
пункт3 2/10
пункт1 1/20

или наоборот, мне все равно

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

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

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

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

ура
c_bb


person user2083317    schedule 08.07.2015    source источник
comment
начните с использования действительного html   -  person charlietfl    schedule 08.07.2015
comment
не мне нужно быть счастливым, но когда вы публикуете неверный код, это одна из первых вещей, на которые обращают внимание. Откуда мы знаем, что это не является частью проблемы?   -  person charlietfl    schedule 08.07.2015


Ответы (1)


Ваша проблема в том, что вместо ng-show используется ng-if. 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>

Рабочий плункер

person Kirill Slatin    schedule 08.07.2015