Angularjs命令切换和删除orderby
[英]Angularjs orderby on toggle and removing orderby
问题描述
So I am trying to use the orderby function of angularjs. 
所以我试图使用angularjs的orderby函数。 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. 但现在的问题是，如果我根本不想要orderBy函数。 If I wanted to get my original customers data without any order how could I do that with the same toggleOrder function? 如果我想在没有任何订单的情况下获取原始客户数据，我怎么能使用相同的toggleOrder函数呢？
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. 如果第一次点击toggleOrder按钮，它将根据城市排序，第二次点击toggleOrder按钮将反向排序城市，第三次点击toggleOrder按钮将没有排序并给我原始数组，依此类推。
If the orderBy function isn't the best to go by let me know. 如果orderBy函数不是最好的让我知道。
Any help would be great! 任何帮助都会很棒！
3 个解决方案
解决方案1
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. 按该原始索引按下该按钮。
解决方案2
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. /编辑我宁愿使用另一种angualrjs过滤器方法，它基本上将字符串作为参数并将其与列表中的对象相匹配。 jsfiddle.net/2q14sryb Hope it works! jsfiddle.net/2q14sryb希望它有效！
解决方案3
1 已采纳 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. 我希望它有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.