Angular orderBy 数字排序作为 ng-repeat 中的文本 [英] Angular orderBy number sorting as text in ng-repeat

问题描述

我有这个数据:

[{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris"},
{"firstname":"Jason","lastname":"Diry","age":"5","id":"5"},
{"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo"}]

当我在 ng-repeat 中按 id 或年龄排序时，它会将数字排序为文本.由于我找不到任何地方写的这是一个问题，我猜我的代码有问题.我创建了这个小提琴:http://jsfiddle.net/vsbGH/1/ 对不起模板，但 jsfiddle 没有t 允许在 html 框中.无论如何，这是加载和排序数据的代码:

When I orderBy id or by age in an ng-repeat, it sorts the number as text. Since I can't find it written that this is an issue anywhere, I'm guessing there's a problem with my code. I have created this fiddle: http://jsfiddle.net/vsbGH/1/ Sorry about the template, but jsfiddle doesn't allow in the html box. Anyway, this is the code which loads and sorts the data:

//user data
app.service('People', function() {
var People = {};
People.details = [{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris"},
                  {"firstname":"Jason","lastname":"Diry","age":"5","id":"5"},
                  {"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo"}]
return People;
});

//list ctrl
controllers.listCtrl = function ($scope,People) {
 $scope.people = People.details;

 $scope.sortList = function(sortname) {
    $scope.sorter = sortname;
 }
}

这是模板的 ng-repeat 部分:

And this is the ng-repeat part of the template:

<tr ng-repeat="person in people | orderBy:sorter ">
        <td>{{person.id | number}}</td>
        <td>{{person.firstname}} </td>
        <td>{{person.lastname}} </td>
        <td>{{person.age | number}}</td>
        <td>{{person.cars}} </td>
 </tr>

如果你能帮助我理解为什么数字数据没有按数字排序，为什么它按文本排序，非常感谢.

Many thanks if you can help me understand why the number data isn't sorting as numbers, and why it's sorting as text.

推荐答案

我认为最合适的解决方案是正确格式化我的 JSON 对象上的数字，即不要将它们用引号括起来.所以:

I think the most appropriate solution is to format the numbers I have on my JSON objects correctly, ie not to wrap them in quotes. So:

 [{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris"},
  {"firstname":"Jason","lastname":"Diry","age":"5","id":"5"},
  {"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo"}]

变成:

[{"id":42,"firstname":"Sarah","lastname":"Dilby","age":40,"cars":"Yaris"},
 {"firstname":"Jason","lastname":"Diry","age":5,"id":5},
 {"id":6,"firstname":"Bilson","lastname":"Berby","age":1,"cars":"Tipo"}]

如果无法更正 JSON 数据的格式，我猜 SergL 的解决方案会很好.

I'm guessing SergL's solution is good if it's not possible to correct the format of the JSON data.

此外，在我的具体案例中，问题与服务器端的 PHP json_encode 函数有关.默认情况下，它将数字视为字符串.为了解决这个问题，我必须在 PHP 脚本的编码方法中添加 JSON_NUMERIC_CHECK 选项:

To add to this, the issue in my specific case is to do with PHP's json_encode function on the server side. By default, it treats numbers as strings. To fix I had to add the JSON_NUMERIC_CHECK option to the encode method in the PHP script:

json_encode($assoc_array,JSON_NUMERIC_CHECK);

这篇关于Angular orderBy 数字排序作为 ng-repeat 中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！