【问题标题】:orderBy two fields (one in reverse)orderBy 两个字段(一个反向)
【发布时间】:2013-12-15 21:57:02
【问题描述】:

我想按状态(在线优先,离线最后)和字母顺序排列朋友列表。我设法得到的是:

  • 在线第一/颠倒字母顺序
  • 或离线第一/字母顺序

这里是plunker 揭露我的问题

【问题讨论】:

    标签: angularjs angularjs-ng-repeat


    【解决方案1】:

    在 Angular 1.5.8 中,前面的示例不起作用。 必须应用不同的逻辑。

    看起来之前 orderBy 的逻辑被应用到了下一个 orderBy 中,所以为了对名称 ASC 和状态 DESC 进行排序,必须反转名称顺序:

    <li class="friend" ng-repeat="friend in friends | orderBy:'name':true | orderBy:'status':true">
    

    这里是固定示例:http://plnkr.co/edit/0ZFIftSgNkU9F03xJztG?p=preview

    【讨论】:

    • 完全错了!如果这样做,您将获得仅按最后一个过滤器排序的朋友列表,此外,该顺序必须计算两次,这很愚蠢...
    • 恕我直言,Vi100,我提供了关于 plunker 的工作示例。请看一下。如果您有解决方案,请提供示例。我们在这里是为了互相帮助,而不仅仅是在没有提供论据的情况下说这是错误的和愚蠢的。
    • 你难道没有看到结果仅按两个过滤器中的最后一个排序(Plunker 上的“状态”)吗?或者您可能不明白按两个字段排序意味着什么……这意味着按第一个字段排序,当您获得重复值时,请使用第二个字段来消除歧义。
    【解决方案2】:

    还有另一种选择,您可以在 ng-repeat 和该行中有多个 orderBy 过滤器:

    <li class="friend" ng-repeat="friend in friends | orderBy:['status','name']:true">
    

    将是:

    <li class="friend" ng-repeat="friend in friends | orderBy:'name':false | orderBy:'status':true">
    

    最后一个orderBy是第一个执行,倒数第二个等等......

    这是我的 plunkr:http://plnkr.co/edit/girPFzdi3Zx0yp0ASGVQ?p=preview

    【讨论】:

    • 完全错了!如果这样做,您将获得仅按最后一个过滤器排序的朋友列表,此外,该顺序必须计算两次,这很愚蠢...
    【解决方案3】:

    orderBy 过滤器更改为:

    orderBy:['-status','name']
    

    这将按状态降序排列(通过前缀 - 字符),然后是升序名称。目前,您正在传递 true 以反转排序,这导致状态正确(在线优先),但名称要反转(即降序)。

    如果你想保持反向布尔值,你可以使用orderBy:['status','-name']:true,但这似乎不如前面所示的那样让status降序清晰。

    【讨论】:

    • 我没有看到它,但它在此页面的文档中docs.angularjs.org/api/ng.filter:orderBy
    • AngularJS 真是太棒了!
    • 如果我使用模型进行排序怎么办?例如:&lt;input type="text" ng-model="sort"/&gt;&lt;div ng-repeat="review in reviews | orderBy:['-date', sort]"&gt;...&lt;/div&gt;我做不到
    • 确实,文档在那里;我根本没有注意到它(它在技术上已在“参数”部分中针对可能正在寻找的其他人进行了介绍)。我想我应该比假设 Angular 文档中的示例具有代表性更好。为了获得额外的乐趣,请注意 Angular 显然会评估你给它的任何字符串,所以除了能够传递函数、字符串或数组之外,你可以将一些 JS 粘贴到字符串中,它会(可能,也许)跑起来(在某个时候,不知何故)。
    • 谢谢,这是完美的
    猜你喜欢
    • 2016-03-15
    • 2016-09-13
    • 2015-08-27
    • 2012-07-08
    • 1970-01-01
    • 2020-12-25
    • 1970-01-01
    • 2013-06-06
    • 1970-01-01
    相关资源
    最近更新 更多