gpt4 book ai didi

AngularJS 表头指令

转载 作者:行者123 更新时间:2023-12-03 13:42:02 24 4
gpt4 key购买 nike

我正在尝试编写一个指令来处理更改表头的图标类。我想要的是(无论如何我相信)处理按表头排序的标准方法。该指令将添加一个链接元素,并在用户单击时按 desc 排序并将图标更改为 desc,再次单击时按 asc 排序并再次按图标。这是我到目前为止所拥有的,但我现在不知道如何处理图标类以及重置同一张表上但在指令范围之外的其他元素。任何帮助都会很棒!

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>

order by 当前在 Controller 中处理:
   $scope.newOrderBy = function(order) {
$scope.orderBy = order;
$scope.reverse = !$scope.reverse;
};

最佳答案

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

顺便说一句,我认为您的指令将更适合作为属性而不是标签。您可以检查以下代码:

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 : '='
},
link: function(scope, element, 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>

关于AngularJS 表头指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18731288/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com