Angularjs orderby on toggle and removing orderby
Question
So I am trying to use the orderby function of angularjs. Currently I have an original data set.
$scope.customers = [
{"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
{"name" : "Alfreds Futterkiste", "city" : "Berlin"},
{"name" : "Bon app", "city" : "Marseille"},
{"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"},
{"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
{"name" : "Around the Horn", "city" : "London"},
{"name" : "B's Beverages", "city" : "London"}
];
$scope.reverse= false;
$scope.toggleOrder = function(){
$scope.reverse=!$scope.reverse;
}
If I use the following to display my customers, I would get the array reverse ordered by the city. Currently I could click on the toggle button and reverse the array if wanted to.
<button ng-click="toggleOrder()">ToggleReverse</button >
<li ng-repeat="x in customers | orderBy : 'city': reverse">{{x.name + ", " + x.city}}</li>
But now the issue is if I didn't want the orderBy function at all. If I wanted to get my original customers data without any order how could I do that with the same toggleOrder function?
For instance, When I load the data it would be the original array. If 1st click of the toggleOrder button, it would sort in based on city, 2nd click of the toggleOrder button would reverse sort the city, and third click of the toggleOrder button would have no sort and give me the original array, and so on.
If the orderBy function isn't the best to go by let me know.
Any help would be great!
3 answers
solution1
1 2016-08-15 00:50:38
So, you want the original order the third time you click on the order by button. Seems doable but complicated. Maybe instead you should have another button that is labeled "original order" and a hidden column that lists the index of your original order. Pushing that button orders by that original index.
solution2
1 2016-08-15 01:21:18
/edited I rather use another approach of angualrjs filters which is basically taking string as param and matching it to the object in list. jsfiddle.net/2q14sryb Hope it works!
solution3
1 ACCPTED 2016-08-15 02:49:02
I'm not sure why you want to add this feature on your application , but here you go:
(function() { 'use strict'; angular .module('app', []) .constant('BUTTON_VALUES', { 1: 'Ascending', 2: 'Descending', 3: 'No order', }) .controller('MainCtrl', MainCtrl); MainCtrl.$inject = ['$scope', 'BUTTON_VALUES']; function MainCtrl($scope, BUTTON_VALUES) { $scope.customers = [ { "name": "Bottom-Dollar Marketse", "city": "Tsawassen" }, { "name": "Alfreds Futterkiste", "city": "Berlin" }, { "name": "Bon app", "city": "Marseille" }, { "name": "Cactus Comidas para llevar", "city": "Buenos Aires" }, { "name": "Bolido Comidas preparadas", "city": "Madrid" }, { "name": "Around the Horn", "city": "London" }, { "name": "B's Beverages", "city": "London" } ]; $scope.btnValue = BUTTON_VALUES[3]; $scope.reverse = true; $scope.orderParam = ''; var increment = 0; $scope.toggleOrder = function() { increment++; $scope.btnValue = BUTTON_VALUES[increment]; switch (increment) { case 1: case 2: $scope.orderParam = 'city'; $scope.reverse = !$scope.reverse; break; case 3: $scope.orderParam = ''; increment = 0; break; } } } })();
<!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> </head> <body ng-controller="MainCtrl"> <button ng-click="toggleOrder()">{{btnValue}}</button> <pre ng-bind-template="Order - {{orderParam}}"></pre> <pre ng-bind-template="Reverse? {{reverse}}"></pre> <hr> <li ng-repeat="x in customers | orderBy : orderParam: orderParam && reverse">{{x.name + ", " + x.city}}</li> </body> </html>
Note: I added a constant as an example to demonstrate how you can handle your button name .
I hope it helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.