如何在JavaScript中对AngularJS的$scope对象数组进行排序？

没问题，我来帮你搞定这个AngularJS数组排序的问题！首先看你的数组结构，每个元素的Rating是字符串格式的数字（比如"4.00"），所以排序的时候得先把它转成数值类型，不然直接按字符串排序会出问题（比如"10.00"会排在"2.00"前面）。下面分两种场景给你解决方案：

一、直接修改原数组的顺序（控制器内处理） #

如果你想直接改变$scope.object数组的排列顺序，可以用JavaScript原生的Array.sort()方法，自定义一个比较函数来处理Rating的类型转换：

1. 按Rating升序排序（从低到高）

$scope.sortByRatingAsc = function() {
  $scope.object.sort(function(a, b) {
    // 把字符串转成浮点数再比较
    const ratingA = parseFloat(a.Rating);
    const ratingB = parseFloat(b.Rating);
    return ratingA - ratingB;
  });
};

2. 按Rating降序排序（从高到低）

只需要把比较结果反过来就行：

$scope.sortByRatingDesc = function() {
  $scope.object.sort(function(a, b) {
    const ratingA = parseFloat(a.Rating);
    const ratingB = parseFloat(b.Rating);
    return ratingB - ratingA;
  });
};

3. 按名称排序（可选）

如果需要按名称的字母顺序排序，记得转成小写避免大小写影响：

$scope.sortByName = function() {
  $scope.object.sort(function(a, b) {
    const nameA = a.name.toLowerCase();
    const nameB = b.name.toLowerCase();
    if (nameA < nameB) return -1;
    if (nameA > nameB) return 1;
    return 0;
  });
};

调用这些函数后，$scope.object的顺序就会直接改变，控制台打印或者视图展示都会是排序后的结果。

二、视图中展示排序结果（不修改原数组） #

如果你不想改变原数组的顺序，只是在页面上展示排序后的内容，可以用AngularJS的orderBy过滤器。不过因为Rating是字符串，需要自定义一个比较函数来转成数值：

首先在控制器里定义转换函数：

$scope.getRatingValue = function(item) {
  return parseFloat(item.Rating);
};

然后在HTML视图的ng-repeat里使用：

<!-- 升序展示 -->
<div ng-repeat="item in object | orderBy:getRatingValue:false">
  {{item.name}} - {{item.Rating}}
</div>

<!-- 降序展示，把false改成true即可 -->
<div ng-repeat="item in object | orderBy:getRatingValue:true">
  {{item.name}} - {{item.Rating}}
</div>

小提醒 #

注意你的数组属性名是Rating（大写R），不是小写的rating，写比较函数的时候别写错了，不然会拿到undefined导致排序出错。另外，如果你添加新数据的时候能把Rating统一成数值类型（或者保持字符串格式一致），后续排序会更顺畅~

内容的提问来源于stack exchange，提问作者Azhar Ch