【问题标题】:Sorting minus number strings with AngularJS 'orderBy'使用AngularJS'orderBy'对负数字符串进行排序
【发布时间】:2016-06-14 15:09:23
【问题描述】:

我正在使用可与 ngRepeat 结合使用的 orderBy 指令对一些数字字符串进行反向排序。

 <div ng-repeat="item in standings| orderBy:['-points', '-gd', 'team_name']">
      <p>{{item.gd}}
 </div>

所以它是排序(按优先级顺序)“points”,然后是“gd”(目标差异),然后是“team_name”(按字母顺序)。

gd 值正确地按降序排列。我遇到的问题是负数值。在这种情况下,数字作为字符串返回,orderBy 函数不会将 "-2" 理解为小于 "-1",而是相反。

如何让 ng-repeat 将数值解析为整数,尤其是解决这个负数的排序问题?

我考虑过做一个过滤器,例如:{{item.gd | *filterHere* }},但是初始的 ng-repeat 指令看不到这个,它需要将源值作为整数。

任何帮助将不胜感激。


更新:

我试过这个过滤器,但是当我在我的 ng-repeat 中调用它时,它什么也没返回:

 app.filter('stringToInteger', function() {
       return function(input) {
             angular.forEach(input, function(value) {
                 parseInt(value.gd);
             })
          };
       return input;
   });

在视图中:

<p ng-repeat="item in standings | orderBy: '-gd' | stringToInteger">GD = {{item.gd}}</p>

【问题讨论】:

  • 为什么不直接在 JavaScript 中将standing.gd 设置为int?您可以使用 parseInt() 轻松完成此操作:w3schools.com/jsref/jsref_parseint.asp
  • 谢谢。我尝试将它与自定义过滤器一起使用,但它不起作用 - 请查看我的更新...

标签: angularjs string integer ng-repeat


【解决方案1】:

过滤器应该是这样的。

app.filter('stringToInteger', function() {
   return function(input) {
         angular.forEach(input, function(value) {
            value.gd =  parseInt(value.gd);
         })
   return input;
   };
});

像这样使用它。

<tr ng-repeat="team in teams | stringToInteger | orderBy:'-gd'">

Plunker 链接以获取更多参考。

https://plnkr.co/edit/GRfMJnRdT1Gu5RXO9elA?p=preview

【讨论】:

  • 谢谢 - 但我试过了,它什么也没返回。我也尝试了一种变体(请参阅更新),但 ng-repeat 仍然没有返回任何内容......你能发现这两种语法有什么问题吗?
  • 嗨,我认为我给你的 plunker 链接是一个工作示例。你也试过了吗??
  • 您的代码的问题是您没有将数字转换后的值分配回去,请使用答案中更新的代码和 plunker。
  • 太好了,非常感谢!我现在的问题是我已经有一个过滤器来挑选我的 ng-repeat 中的特定属性,是否可以在 ng-repeat 上调用两个过滤器?当前 ng-repeat:&lt;tr ng-repeat="item in standings | orderBy:['-points', '-gd', 'team_name'] | filter: { comp_group: 'Group A' }:true"&gt;。显然我现在也想打电话给stringToInteger。你会在这里建议什么?
  • 您可以在角度中使用多个过滤器。像这样试试。
猜你喜欢
  • 2011-11-30
  • 1970-01-01
  • 1970-01-01
  • 2013-04-11
  • 1970-01-01
  • 1970-01-01
  • 2012-11-14
  • 2018-09-22
  • 2015-01-16
相关资源
最近更新 更多