角度顺序将数字排序为ng-repeat中的文本

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-repeat部分:

<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

我认为最合适的解决方案是正确格式化我在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函数.默认情况下,它将数字视为字符串.要解决此问题,我必须JSON_NUMERIC_CHECK在PHP脚本中为encode方法添加选项:

json_encode($assoc_array,JSON_NUMERIC_CHECK);

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

在ng-repeat指令中,您使用的是数字过滤器

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

过滤器用于格式化输出,但它们不会更新"模型"属性.例如:person.id = 1234.56789将呈现为1,234.568.

如上所述,您必须将age转换为Number.然后orderBy将按预期工作.例如,在您的服务中:

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

Answer 4

如果您的orderBy值不是指向另一个字符串的变量,而是您要对其进行排序的属性,则必须将其放在引号中.

person in people | orderBy:'-id'

如果在解析了int或float之后仍然没有正确排序,可能是因为这个原因.<:/(那是我的笨蛋帽)