javascript - Angularjs orderby 切换和删除 orderby-6ren

javascript - Angularjs orderby 切换和删除 orderby

转载作者：行者123 更新时间：2023-11-30 11:52:54

29

4

所以我尝试使用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 函数不是最好的选择，请告诉我。

任何帮助都会很棒!

最佳答案

我不确定您为什么要在您的应用程序中添加此功能，但现在开始吧:

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

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

希望对你有帮助。

关于javascript - Angularjs orderby 切换和删除 orderby，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38947918/

29

4

0

文章推荐： javascript - mark.js 不高亮单词？

文章推荐： java - 在 JPanel 中调整 PApplet 的大小

文章推荐： java - OnClickListener 和表格布局

文章推荐： javascript - JSON 中位置 0(...) 中的意外标记 r

javascript - Angularjs orderby 切换和删除 orderby
所以我尝试使用angularjs的orderby函数。目前我有一个原始数据集。 $scope.customers = [ {"name" : "Bottom-Dollar Market
c# - Linq Orderby 与 SQL Orderby
我有一个包含以下数据的表列 (Varchar): COLUMN_NAME 102100 1-2000 112100 当我在 SQL 语句中使用 OrderBy 时，我按以下顺序获取项目: COLUMN
C# LINQ Orderby - 真/假如何影响 orderby？
我正在研究一些 LINQ 排序，因为我有一个 ID 列表，我需要按顺序对它们进行排序。但是，某些 ID 需要优先于标准顺序。鉴于此 C# 代码(可以粘贴到 .NET Fiddle 中进行测试)，排序
c# - Queryable.OrderBy 和 Enumerable.OrderBy 有什么区别？
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 9 年前。 Improve t
performance - LINQ to Entities -- OrderBy().ToList() 与 ToList().OrderBy()
我正在寻找这些 LINQ 表达式的确认/澄清: var context = new SomeCustomDbContext() // LINQ to Entities? var items = co
javascript - firebase orderby key vs orderby timestamp，用于分页
我的数据在我的 firebase 中看起来像这样。 users: { -KOwKNCB5IiDBxY9FNzR: { content: { blah blah }, timestamp:147
c# - TSQL OrderBy 与 LINQ OrderBy Madness for UniqueIdentifier
在尝试找出一段代码不同步的原因后，我开始意识到 TSQL OrderBy 与 Linq OrderBy 对于字符串的差异很大。所以很自然地，我必须找到一种方法来确保来自 tsql 的语句返回与 lin
c# - 为什么有 OrderBy 和 OrderByDescending 而没有 OrderBy(SortOrder)？
目前，如果我们将订购方向作为外部依赖项，我们必须使用 if 来应用此方向: public static IEnumerable getlist(string directory, string sea
javascript - 编辑 orderby-property 时 AngularJS orderby 不起作用
我在我的范围内有一个对象列表，我想遍历它们，以按某些属性排序的方式显示它们的一些属性并更改它们。 ng-repeat 用于显示绑定(bind)到列表中每个对象的文本框，并应用以“position”作为
sql-server - OrderBy().FirstOrDefault(<条件>) 与Where(<条件>).OrderBy().FirstOrDefault()
我在 C# 项目中使用 EntityFramework 6.1.3 和 SQL Server。我有两个查询，基本上应该执行相同的操作。 1. Exams.GroupBy(x=>x.SubjectID)
mysql - Laravel 中的条件 `orderBy` 或 `DB::Raw` inside `orderBy`
我正在尝试以 asc 顺序显示从今天开始的特定接下来几天的约会列表。(例如:接下来的 5 天或 10 天)。仅从今天开始，接下来的 5 天或 10 天(注意:天数将是动态的，我的意思是客户将设置)。当
linq - ".OrderBy(p => p.Id)"和 "orderby p.Id ascending"之间的区别
这个问题已经有答案了: 已关闭12 年前。 Possible Duplicates: Which LINQ syntax do you prefer? Fluent or Query Expressi
asp.net-web-api2 - OData V4 $expand 嵌套 $filter 和 $orderby -- 在 expand 内组合 $filter 和 $orderby
我目前有一个 OData V4 服务，它具有以下模型。 “类别”——“代码” 对于每个类别，可以有许多代码。我需要 $expand the Codes, $filter where Active =
RethinkDB索引用于过滤器+ orderby
可以说注释表具有以下结构: id | author | timestamp | body 我想使用索引有效地执行以下查询: r.table('comments').getAll("me", {inde
LINQ - OrderBy 显式
是否可以像这样使用 LINQ OrderBy: .OrderBy(x=>(x.SourceID == 3), (x.SourceID == 2), (x=>x.SourceID == 4), (x.S
angularjs - orderBy 在简单数组上？
我有一个这样的数组: $scope.telcodes = ['44', '01', '221', '335']; 如何在像这样的简单数组上使用 orderBy 来生成从 01 开始的有序列表？我知道
Laravel - 嵌套关系中的 orderBy
我有一个像这样 Eloquent 查询: Forum::with(['comments.user'])->find($id); 这将返回嵌套结果 forum -> its comments -> us
symfony - 注释@OrderBy
我正在尝试通过 ManyToMany 注释自动对报告的结果进行排序 @OrderBy : /** * @ORM\ManyToMany(targetEntity="Artist", inversedB
r - orderBy 随排序递减和递增的变化
是否有按几列对 data.frame 进行排序的标准方法，但随着减少或增加的变化？例如，您可能希望按一个变量(递减)和下一个(递增)对 data.frame 进行排序。有没有类似的东西: mydf[
Linq - Orderby 未排序
我有一个 linq 查询，无论出于何种原因，它都没有像我期望的那样返回订购。任何人都可以指出我为什么以及我做错了什么的正确方向吗？代码如下: List designer = null; using

首页

博学

6Ren·AI

商城

javascript - Angularjs orderby 切换和删除 orderby