Question

所以我试图使用angularjs的orderby函数。目前我有一个原始数据集。

    $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;

 }

如果我使用以下内容显示我的客户，我会得到城市反向排序的阵列。目前我可以单击切换按钮并反转数组，如果需要。

 <button ng-click="toggleOrder()">ToggleReverse</button >

 <li ng-repeat="x in customers | orderBy : 'city': reverse">{{x.name + ", " + x.city}}</li>

但现在的问题是，如果我根本不想要orderBy功能。如果我想在没有任何订单的情况下获取我的原始客户数据，我怎么能使用相同的toggleOrder函数呢？

例如，当我加载数据时，它将是原始数组。如果第一次点击toggleOrder按钮，它将根据城市排序，第二次点击toggleOrder按钮将反向排序城市，第三次点击toggleOrder按钮将没有排序并给我原始数组，依此类推。

如果orderBy函数不是最好的，请告诉我。

任何帮助都会很棒！

Answer 1

因此，您希望第三次单击订单按钮时的原始订单。似乎可行但复杂。也许你应该有另一个标有＆＃34;原始顺序＆＃34;以及列出原始订单索引的隐藏列。按原始索引按下按钮顺序。

Answer 2

/编辑我宁愿使用另一种angualrjs过滤器方法，它基本上将字符串作为参数并将其与列表中的对象进行匹配。 jsfiddle.net/2q14sryb 希望它有效！

Answer 3

我不确定您为什么要在应用程序上添加此功能，但是在这里：

(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>

注意：我添加了常量作为示例，演示如何处理按钮名称。

我希望它有所帮助。

Angularjs命令切换和删除orderby

3 个答案: