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

以角

1 个答案: