Angularjs表排序指令

时间:2014-03-21 09:51:11

标签: javascript angularjs angularjs-directive

我已经为AngularJS编写了以下指令,遗憾的是并非一切正常。

myApp.directive("thsort", function() {
return {
    restrict : 'A',
    transclude : true,
    template : '<span ng-click="onClick()">' +
        '<span ng-transclude></span>{{column}}' +
        ' <span class="glyphicon glyphicon-sort"></span>' +
        //'<span class="glyphicon" ng-class="{\'glyphicon-sort-by-alphabet\' : column == by && !descending,  \'glyphicon-sort-by-alphabet-alt\' : column==by && descending}"></span>'+
        '</span>',
    scope : {
        by : '='
    },
    link : function($scope) {
        $scope.onClick = function() {
            if ($scope.$parent.column == $scope.by) {
                $scope.$parent.descending = !$scope.$parent.descending;
            } else {
                $scope.$parent.column = $scope.by;
                $scope.$parent.descending = false;
            }
            //test
            $scope.$watch('column', function() {
                this.column = $scope.$parent.column;
            });
        };
    }
};});

这是HTML代码:

<thead>
<tr>
    <th thsort by="'tName'">Name</th>
    <th thsort by="'tStart'">Start</th>
    <th thsort by="'tEnd'">Ende</th>
    <th thsort by="'tLocation'">Ort</th>
    <th thsort by="'sfName'">Verantwortlicher</th>
    <th thsort by="'tPublic'">Public?</th>
    <th></th>
</tr></thead>

<tbody>
<tr ng-repeat="friend in friends | orderBy:column:descending">

我已经为AngularJS编写了以下指令,遗憾的是并非一切正常。 不幸的是,我不可能使用Glyphicons并隐藏起来。访问$ scope。 $ Parent for column,我不可能。只有在对当前行进行排序时才必须显示图标。快乐的DESC和ASC不同。

我还希望指令“thsort”到“table”适用,以便任何带有“by”的“th”被自动寻址。 (只是一点点点缀)

我想创建一些帮助,以便能够快速轻松地将此指令应用于表。甚至可以在同一范围内的表之间。

当前状态为plnkr.co

如果有人可以帮助我,我很高兴。

0 个答案:

没有答案