Show and hide arrow icon according to sorting in angular.js
I am trying to show and hide an arrow icon according to sorting. I am new to angular js please help I am using bootstrap
<div ng-controller="PurchasesCtrl">
<h2>Purchases:</h2>
<table class="table">
<thead>
<tr >
<th ng-click="changeSorting('username')" >UserName <span class="glyphicon glyphicon-chevron-up"></span><span class="glyphicon glyphicon-chevron-down"></span></th>
<th ng-click="changeSorting('usertype')">UserType</th>
<th ng-click="changeSorting('age')" >Age</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="purchase in purchases.data|orderBy:sort.column:sort.descending">
<td >{{purchase.username}}</td>
<td>{{purchase.usertype}}</td>
<td>{{purchase.age}}</td>
</tr>
</tbody>
</table>
</div>
angular js sort
var myApp = angular.module ("myApp", []);
myApp.factory("Purchases", function(){
var Purchases = {};
Purchases.data = [
{
username: "suraj kumar gosi",
usertype: "sponer",
age: "20"
},
{
username: "kao kumar gosi",
usertype: "clinet",
age: "26"
},
{
username: "surdfsdfaj kumar gosi",
usertype: "clinfsdfset",
age: "50"
}
];
return Purchases;
});
function PurchasesCtrl($scope, Purchases){
$scope.purchases = Purchases;
$scope.sort = {
column: '',
descending: false
};
$scope.changeSorting = function(column) {
var sort = $scope.sort;
if (sort.column == column) {
sort.descending = !sort.descending;
} else {
sort.column = column;
sort.descending = false;
}
};
}
pardon me. thank you in advance
+3
source to share
2 answers
Update 2: Ok, this is much better than my previous answer. Fiddle
Markup:
<th ng-click="changeSorting('username')">
UserName
<!-- <i> is common for icons -->
<i class="glyphicon" ng-class="getIcon('username')"></i>
</th>
...
<tr ng-repeat="purchase in purchases.data |
orderBy:sort.active:sort.descending">
Then in your controller:
$scope.sort = {
active: '',
descending: undefined
}
$scope.changeSorting = function(column) {
var sort = $scope.sort;
if (sort.active == column) {
sort.descending = !sort.descending;
}
else {
sort.active = column;
sort.descending = false;
}
};
$scope.getIcon = function(column) {
var sort = $scope.sort;
if (sort.active == column) {
return sort.descending
? 'glyphicon-chevron-up'
: 'glyphicon-chevron-down';
}
return 'glyphicon-star';
}
+5
source to share
Check this plunker: plunker to show icons when sorting
Instead of changing the icons with an additional function, we can use css and a sort function: `$ scope.reverse = false; $ scope.sortKey = 'title';
$scope.sort = function (keyname) {
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
} `
and Html like this:
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<style>
body {
padding-top: 30px;
}
.sortorder:after {
content: '\25b2';
}
.sortorder.descending:after {
content: '\25bc';
}
</style>
</head>
<body>
<div class="container" ng-app="bookApp" ng-controller="bookController">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<td style="width: 70px;">Sr. No.</td>
<td ng-click="sort('title')">Book Title
<span class="sortorder descending" ng-hide="(sortKey=='title' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='title' && reverse==false)"></span>
</td>
<td ng-click="sort('author')">Author
<span class="sortorder descending" ng-hide="(sortKey=='author' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='author' && reverse==false)"></span>
</td>
<td ng-click="sort('price')">Price
<span class="sortorder descending" ng-hide="(sortKey=='price' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='price' && reverse==false)"></span>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="book in bookList | orderBy: sortKey:reverse">
<td>{{ $index +1 }}</td>
<td>{{ book.title }}</td>
<td>{{ book.author }}</td>
<td>{{ book.price }}</td>
</tr>
</tbody>
</table>
</div>
<script>
var bookApp = angular.module("bookApp", []);
bookApp.controller('bookController', function ($scope) {
$scope.bookList = [
{ "title": "Hobbit", "author": "Aman", "price": 700 },
{ "title": "Lord of the rings", "author": "Sameer", "price": 1000 },
{ "title": "Harry Porter", "author": "Anuj", "price": 650 },
{ "title": "The little prince", "author": "Jatin", "price": 870 },
{ "title": "Angels and Demons", "author": "Shivam", "price": 890 }
];
$scope.reverse = false;
$scope.sortKey = 'title';
$scope.sort = function (keyname) {
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
}
});
</script>
</body>
</html>
body {
padding-top: 30px;
}
.sortorder:after {
content: '\25b2';
}
.sortorder.descending:after {
content: '\25bc';
}
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<style>
body {
padding-top: 30px;
}
.sortorder:after {
content: '\25b2';
}
.sortorder.descending:after {
content: '\25bc';
}
</style>
</head>
<body>
<div class="container" ng-app="bookApp" ng-controller="bookController">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<td style="width: 70px;">Sr. No.</td>
<td ng-click="sort('title')">Book Title
<span class="sortorder descending" ng-hide="(sortKey=='title' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='title' && reverse==false)"></span>
</td>
<td ng-click="sort('author')">Author
<span class="sortorder descending" ng-hide="(sortKey=='author' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='author' && reverse==false)"></span>
</td>
<td ng-click="sort('price')">Price
<span class="sortorder descending" ng-hide="(sortKey=='price' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='price' && reverse==false)"></span>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="book in bookList | orderBy: sortKey:reverse">
<td>{{ $index +1 }}</td>
<td>{{ book.title }}</td>
<td>{{ book.author }}</td>
<td>{{ book.price }}</td>
</tr>
</tbody>
</table>
</div>
<script>
var bookApp = angular.module("bookApp", []);
bookApp.controller('bookController', function ($scope) {
$scope.bookList = [
{ "title": "Hobbit", "author": "Aman", "price": 700 },
{ "title": "Lord of the rings", "author": "Sameer", "price": 1000 },
{ "title": "Harry Porter", "author": "Anuj", "price": 650 },
{ "title": "The little prince", "author": "Jatin", "price": 870 },
{ "title": "Angels and Demons", "author": "Shivam", "price": 890 }
];
$scope.reverse = false;
$scope.sortKey = 'title';
$scope.sort = function (keyname) {
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
}
});
</script>
</body>
</html>
0
source to share