[英]Changing glyphicons on click + table header colour change
Essentially I am using chevrons glyphicon-chevron-down
for sort buttons on a set table headers. 本质上,我使用人字形
glyphicon-chevron-down
来设置表头上的排序按钮。 When you click on a chevron it will sort the table in descending order and when you click it a second time it sort in an ascending order and so on and so forth. 当您单击人字形时,它将以降序对表格进行排序;当您再次单击它时,将按升序对表格进行排序,依此类推。 If you click on a different column's chevron, it will sort first by descending and then the above applies
如果单击其他列的人字形,它将首先按降序排序,然后适用
I wish to make it so when you click on a chevron it alternates between glyphicon-chevron-down
and glyphicon-chevron-up
. 我希望做到这一点,所以当您单击人字形时,它会在
glyphicon-chevron-down
和glyphicon-chevron-up
之间glyphicon-chevron-down
。 Do note there needs to be some sort of logic to make it so clicking on another column won't change the chevron to a glyphicon-chevron-up
on the first click as it will be first sorting in the descending order. 请注意,必须有某种逻辑才能使之单击,因此单击另一列将不会在第一次单击时将
glyphicon-chevron-up
更改为glyphicon-chevron-up
,因为它将首先按照降序排序。
Additionally I'm trying to make it so the table header with the chevron that got clicked changes colour and will return to the previous colour when a different chevron is clicked. 另外,我正在尝试使其具有被单击的人字形的表标题更改颜色,并在单击其他人字形时返回到先前的颜色。
Any assistance for either of the problems will be greatly appreciated. 对于任何一个问题的任何帮助将不胜感激。 Here is a sample of the code for reference.
这是代码示例供参考。
The HTML HTML
<th>Header1<span ng-click="setOrderProperty('c.name')" class="glyphicon glyphiconsort glyphicon-chevron-down pull-right"></span></th>
<th>Header2<span ng-click="setOrderProperty('c.name2')" class="glyphicon glyphiconsort glyphicon-chevron-down pull-right"></span></th>
<th>Header3<span ng-click="setOrderProperty('c.name3')" class="glyphicon glyphiconsort glyphicon-chevron-down pull-right"></span></th>
The JavaScript JavaScript
$scope.setOrderProperty = function(propertyName) {
if ($scope.orderProperty === propertyName) {
$scope.orderProperty = '-' + propertyName;
} else if ($scope.orderProperty === '-' + propertyName) {
$scope.orderProperty = propertyName;
} else {
$scope.orderProperty = propertyName;
}
};
What you need is ng-class
. 您需要的是
ng-class
。
Maintain a status property on your scope. 在您的范围内维护一个status属性。 Clicking on the header will set this property:
单击标题将设置此属性:
$scope.activeColumn = '';
$scope.ascending = '';
$scope.setOrderProperty = function (activeColumn) {
// If clicking on the current column, reverse ascending/descending
if ($scope.activeColumn === activeColumn) {
$scope.ascending = !$scope.ascending;
}
$scope.activeColumn = activeColumn;
};
For your HTML: 对于您的HTML:
<th>Header1<span ng-click="setOrderProperty(c.name)" ng-class="{
'active': activeColumn === c.name,
'glyphicon-chevron-down': ascending === false,
'glyphicon-chevron-up': ascending === true
}" class="glyphicon glyphiconsort pull-right"></span></th>
<th>Header2<span ng-click="setOrderProperty('c.name2')" ...
<th>Header3<span ng-click="setOrderProperty('c.name3')" ...
In your CSS, set the styles of class active
for the selected column for sorting. 在CSS中,为选定的列设置
active
的类样式以进行排序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.