angularjs - 当 ID 是字符串而不是 INT 时，Angular js 按 ID 排序

Question

我正在使用 Angular，并且我有一个想要动态渲染的元素列表。

我有三个按钮，每个按钮都使用参数调用相同的函数。此参数是我希望列表显示的顺序。

到目前为止一切顺利，一切都按预期进行。

除了 ID 之外的所有内容。

不幸的是，我从服务获取数据，ID 作为字符串而不是整数返回，这意味着 Angular 将“10”放在“2”之前。

我觉得必须使用循环来迭代我的数据，只是为了将 ID 从字符串转换为整数，这可能不是必需的步骤，并且可能会减慢应用程序的速度，尤其是在没有大量处理的旧手机上权力(如果我完全错了，请告诉我)。

这是一个简单的示例:

var app = angular.module('myApp', ['ionic'])
app.controller('myCtrl', ['$scope', function($scope) {
  $scope.data = [
   {type: "Type 1",
     name: "Name1",
     element: {
       one: {
         id: "10"
       },
       two: {
          location: "US"
       }                    
     }
   },
   {type: "Type 1",
     name: "Name2",
     element: {
       one: {
         id: "2"
       },
       two: {
          location: "UK"
       }                    
     }
   },
   {type: "Type 3",
     name: "Name3",
     element: {
       one: {
         id: "3"
       },
       two: {
          location: "DE"
       }                    
     }
   },
   {type: "",
     name: "Name4",
     element: {
       one: {
         id: "4"
       },
       two: {
          location: "IT"
       }                    
     }
   },
   {type: "Type 1",
     name: "Name4",
     element: {
       one: {
         id: "5"
       },
       two: {
          location: ""
       }                    
     }
   }
  ]

  $scope.ChangeOrder = function(order) {
    switch (order) {
      case 'id':
        return $scope.order = parseInt('element.one.id');
      case 'location':
        return $scope.order = 'element.two.location';
      case 'type':
        return $scope.order = 'type';
    }
  };     
}]);

和HTML:

 <div class="container">
          <div ng-repeat="d in data | orderBy: order">
          {{d.element.one.id}} - {{d.name}} - {{d.element.two.location}} - {{d.type}}
        </div>
      </div>

如您所见，我尝试在开关中使用 parseInt，但这似乎不起作用。

是否有另一种可能的解决方案来避免循环来实现此目的？

这是一支笔，你可以用它来理解我的意思:

http://codepen.io/NickHG/pen/ZBZNwe

Answer 1

在 AngularJS 1.5.7 中，orderBy 函数通过一个额外的比较器进行了扩展 - 这基本上就是您所寻找的。您共享的代码在 ionic 包中使用 AngularJS 1.5.3，但尚不支持此功能。

基本上就是这样

<div ng-repeat="d in data | orderBy: order : false : mySortingFunction">

这是 JavaScript 部分

// AngularJS' default compare function
// (defaultCompare() was taken from AngularJS 1.5.7 directly)
var defaultCompare = function(v1, v2) {
    var result = 0, type1 = v1.type, type2 = v2.type;
    if (type1 === type2) {
      var value1 = v1.value;
      var value2 = v2.value;
      if (type1 === 'string') {
        // Compare strings case-insensitively
        value1 = value1.toLowerCase();
        value2 = value2.toLowerCase();
      } else if (type1 === 'object') {
        // For basic objects, use the position of the object
        // in the collection instead of the value
        if (angular.isObject(value1)) value1 = v1.index;
        if (angular.isObject(value2)) value2 = v2.index;
      }
      if (value1 !== value2) {
        result = value1 < value2 ? -1 : 1;
      }
    } else {
      result = type1 < type2 ? -1 : 1;
    }
    return result;
};

// initialize order type
$scope.order = 'element.one.id';
// custom sorting function
$scope.mySortingFunction = function(v1, v2) {
  if ($scope.order !== 'element.one.id') {
    // fallback to default compare function
    return defaultCompare(v1, v2);
  }
  if (v1.value === v2.value) return 0;
  return (parseInt(v1.value) < parseInt(v2.value) ? -1 : 1);
};

方法 defaultCompare() 是 AngularJS 的默认函数，不幸的是，它是内部 API 的一部分并且无法访问 - 这就是为什么它被复制以回退到默认排序行为。

请参阅AngularJS documentation了解更多详情。