角度排序表进度答案

【问题标题】：sorting table progress in angular角度排序表进度
【发布时间】：2015-07-08 13:36:47
【问题描述】：

我的问题是按角度对表格进行排序，其中有一列以 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

【问题讨论】：

使用有效的html开始
不是我需要高兴，而是当您发布无效代码时，这是首先引起注意的事情之一。我们怎么知道这不是问题的一部分？

标签： angularjs sorting angularjs-orderby

【解决方案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

【讨论】：