Angularjs order关于切换和移除order

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

    $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按钮将不进行排序，并返回原始数组，等等。

如果order函数不是最好的选择，请告诉我。

任何帮助将是伟大的!

我不知道您为什么要在应用程序中添加此功能，但是您可以这样做:

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

注意:我添加了一个常量作为示例来演示如何处理按钮名称。

所以，第三次点击order by按钮时，您想要原始订单。似乎可行，但很复杂。也许您应该使用另一个标记为"原始订单"的按钮和一个列出原始订单索引的隐藏列。按下这个按钮，按原始索引排序。

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

相关内容

最新更新

热门标签：