AngularJS orderby整数字段无法正常工作

时间:2013-10-04 06:51:29

标签: javascript angularjs angularjs-ng-repeat

我刚从http://docs.angularjs.org/api/ng.filter:orderBy获取了最简单的演示,只是将age的值更改为具有不同的数字位数。它停止按预期工作。它的排序类似“字符串”而不是“整数”值。我应该如何更改它以按年龄顺序排列整数值?

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

代码是:

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>

6 个答案:

答案 0 :(得分:18)

您必须将年龄转换为类型号才能使orderBy正常工作。

添加到控制器以将String age排序为float:

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

它应该有用,

参见 PLunker

答案 1 :(得分:11)

我知道这个答案有点晚了,但在最新版本的Angular中,你可以使用一个函数作为orderBy的谓词(https://docs.angularjs.org/api/ng/filter/orderBy)。 在这种情况下,向控制器添加类似下一个

的功能
$scope.orderByFunction = function(friend){
    return parseInt(friend.age);
};

并更改orderBy过滤器中的谓词

ng-repeat="friend in friends | orderBy:orderByFunction:reverse"

这样就可以了!

答案 2 :(得分:1)

你只需删除年龄变量中的引号,因为它是一个整数,而不是一个字符串:

  $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}]

答案 3 :(得分:0)

AngularJs具有内置功能来对值进行排序。但在排序浮点值之前,我们需要使用parseFloat()javavscript函数将值转换为float。

http://hubpages.com/technology/How-to-sort-table-content-filter-table-data-and-add-pagination-using-Angular-JS

答案 4 :(得分:0)

将谓词更改为以下内容也可以:

<th><a href="" ng-click="predicate = '1*age'; reverse=!reverse">Age</a></th>

答案 5 :(得分:-1)

在将数组转换为json时添加JSON_NUMERIC_CHECK代码。 json_encode($ anyarray的,JSON_NUMERIC_CHECK);