AngularJS orderby 整数字段无法正常工作 [英] AngularJS orderby integer field not working properly

查看：26 发布时间：2021/11/9 23:54:19 javascript angularjs angularjs-ng-repeat

本文介绍了AngularJS orderby 整数字段无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚刚从 http://docs.angularjs.org/api/ng.filter 中获取了最简单的演示:orderBy 并且只需将 age 的值更改为具有不同的位数.它停止按预期工作.它的排序类似于字符串"而不是整数"值.我应该如何更改它，使其像整数值一样按年龄排序?

Plunkr 演示在这里http://plnkr.co/edit/pzgiIYrki7jUZdVaTMt9?p=preview

代码是:

function Ctrl($scope) {$scope.friends =[{姓名:'约翰'，电话:'555-1212'，年龄:'2352345'}，{姓名:'玛丽'，电话:'555-9876'，年龄:'4235243'}，{姓名:'迈克'，电话:'555-4321'，年龄:'241'}，{姓名:'亚当'，电话:'555-5678'，年龄:'34325'}，{姓名:'朱莉'，电话:'555-8765'，年龄:'1234'}]$scope.predicate = '-age';}<!doctype html><html ng-app="应用程序"><头><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script><script type="text/javascript" src="script.js"></script><身体><div ng-controller="Ctrl"><pre>排序谓词 = {{谓词}};反向 = {{反向}}</pre><小时/>[ <a href="" ng-click="predicate=''">unsorted</a>]<表类=朋友"><tr><th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a>(<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)</th><th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">电话号码</a></th><th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th></tr><tr ng-repeat="朋友中的朋友 | orderBy:predicate:reverse"><td>{{friend.name}}</td><td>{{friend.phone}}</td><td>{{friend.age}}</td></tr>

</html>

解决方案

您必须将 age 转换为 Number 类型才能使 orderBy 正常工作.

添加到您的控制器以将字符串年龄排序为浮点数:

 angular.forEach($scope.friends, function (friend) {朋友.年龄 = parseFloat(friend.age);});

应该可以，

参见 PLunker

I just took the simplest demo from http://docs.angularjs.org/api/ng.filter:orderBy and just change the value of age to have different number of digit. It stop working as it expected. Its ordering like "string" not as "integer" value. How should i change it so that it order by age like integer value?

Plunkr demo is here http://plnkr.co/edit/pzgiIYrki7jUZdVaTMt9?p=preview

Codes are:

function Ctrl($scope) {
  $scope.friends =
      [{name:'John', phone:'555-1212', age:'2352345'},
       {name:'Mary', phone:'555-9876', age:'4235243'},
       {name:'Mike', phone:'555-4321', age:'241'},
       {name:'Adam', phone:'555-5678', age:'34325'},
       {name:'Julie', phone:'555-8765', age:'1234'}]
  $scope.predicate = '-age';
}


<!doctype html>
<html ng-app="App">
  <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
  <body>

<div ng-controller="Ctrl">
  <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
  <hr/>
  [ <a href="" ng-click="predicate=''">unsorted</a> ]
  <table class="friend">
    <tr>
      <th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a>
          (<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)</th>
      <th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th>
      <th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th>
    </tr>
    <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>


  </body>
</html>

解决方案

you have to convert age to type Number to make to orderBy to work as it should.

Add to your controller to sort String age as float:

   angular.forEach($scope.friends, function (friend) {
    friend.age = parseFloat(friend.age);
   });

It should work,

See PLunker

这篇关于AngularJS orderby 整数字段无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

AngularJS orderby 整数字段无法正常工作 [英] AngularJS orderby integer field not working properly

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

AngularJS orderby 整数字段无法正常工作 [英] AngularJS orderby integer field not working properly

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭