表头的AngularJS指令

发布时间：2020-12-17 08:05:25 所属栏目：安全来源：网络整理

导读：我正在尝试编写一个指令来处理更改表头的图标类。我想要的是(我相信无论如何)处理按表标题排序的标准方式。该指令将添加一个链接元素，并根据用户的点击排序按desc，并将图标更改为desc，再次点击再次排序，然后再次图标。这是我到目前为止，但是我现在对于

我正在尝试编写一个指令来处理更改表头的图标类。我想要的是(我相信无论如何)处理按表标题排序的标准方式。该指令将添加一个链接元素，并根据用户的点击排序按desc，并将图标更改为desc，再次点击再次排序，然后再次图标。这是我到目前为止，但是我现在对于如何处理图标类以及在同一个表上重新设置其他元素，但是在指令范围之外我现在感到失落。任何帮助将是伟大的！

angular.directive("tableHeaders",function() {
return {
    restrict: 'E',scope: {},template:'<i class="glyphicon glyphicon-filter"></i>',link: function(scope,element,attrs) {
        attrs.class = 'glyphicon glyphicon-sort-by-alphabet-alt';
    }
}
});

这是我在html方面的内容：

<th>First Name<a ng-click="newOrderBy('_firstName')"><table-headers></table-headers></a></th>
<th>Last Name<a ng-click="newOrderBy('_lastName')"><table-headers></table-headers></a></th>
<tr ng-repeat="item in items | orderBy:orderBy:reverse>
<td>{{item._firstName}}</td>
<td>{{item._lastName}}</td>
</tr>

控制器当前处理的顺序：

$scope.newOrderBy = function(order) {
        $scope.orderBy = order;
        $scope.reverse = !$scope.reverse;
    };

您需要做的是每个元素使用您的指令提供订单和当前订单(来自控制器的订单)。

BTW我认为你的指令将是一个更好的匹配作为一个属性，而不是一个标签。您可以查看以下代码：

angular.module('myApp',[]).directive("sort",function() {
return {
    restrict: 'A',transclude: true,template : 
      '<a ng-click="onClick()">'+
        '<span ng-transclude></span>'+ 
        '<i class="glyphicon" ng-class="{'glyphicon-sort-by-alphabet' : order === by && !reverse,'glyphicon-sort-by-alphabet-alt' : order===by && reverse}"></i>'+
      '</a>',scope: {
      order: '=',by: '=',reverse : '='
    },attrs) {
      scope.onClick = function () {
        if( scope.order === scope.by ) {
           scope.reverse = !scope.reverse 
        } else {
          scope.by = scope.order ;
          scope.reverse = false; 
        }
      }
    }
}
});

和它一起去的地板：http://plnkr.co/edit/P4cAm2AUGG36nejSjOpY?p=preview

该指令是这样使用的：

<thead>
  <tr>
    <th sort by="order" reverse="reverse" order="'name'">Name</th>
    <th>Phone</th>
    <th sort by="order" reverse="reverse" order="'age'">Age</th>        
  </tr>
</thead>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!