角度顺序按数字排序为ng重复中的文本

Question

我有这个数据：

[{"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不允许在html框中。总之，这是加载和排序数据的代码:

//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重复部分：

<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>

如果你能帮助我理解为什么数字数据不按数字排序，而按文本排序，我将不胜感激。

Answer 1

在您的ng重复指令中，您正在使用数字过滤器

<td>{{person.id | number}}</td>

过滤器用于格式化输出，但不会更新模型属性。例如：个人。id=1234.56789将呈现为1234.568。

如上所述，您必须将年龄转换为数字类型。然后orderBy将按应有的方式工作。例如在您的服务中：

angular.forEach(People.details, function (detail) {
  detail.age = parseFloat(detail.age);
});

Answer 2

您不必修改您的 JSON。你可以像这样将函数传递给 orderBy 过滤器：

$scope.sorterFunc = function(person){
    return parseInt(person.id);
};

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

Answer 3

我认为最合适的解决方案是正确格式化我在JSON对象上的数字，即不要用引号包装它们。所以：

 [{"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的解决方案是不错的。

除此之外，在我的具体案例中，问题是如何处理服务器端的PHP json_encode函数。默认情况下，它将数字视为字符串。要修复此问题，我必须将＜code＞JSON_NUMERIC_CHECK＜/code＞选项添加到PHP脚本中的编码方法中：

json_encode($assoc_array,JSON_NUMERIC_CHECK);