javascript - AngularJS 使用对象属性对多个对象数组进行排序

Question

我有一个多个对象数组:

{
   "option_12": {
      "id": "0",
      "name": "6 x 330ml",
      "price": "0.00"
   },
   "option_14": {
      "id": 1,
      "name": "12 x 330ml",
      "price": "2.00"
   },
   "option_17": {
      "id": 1,
      "name": "15 x 330ml",
      "price": "4.00"
   },
   "option_10": {
      "id": 1,
      "name": "30 x 330ml",
      "price": "1.00"
   }
}

我正在使用 AngularJS Filter orderBy 尝试按价格值对对象进行排序。因此，在本例中，option_12 应该是第一个，option_10 应该是第二个。

在 Controller 中:

$scope.pOptions = $filter('orderBy')($scope.pOptions, 'price');

在我看来，我使用 ng-options 填充选择选项:

<select ng-model="SelectedPOption" ng-options="option.name for option in pOptions|orderBy:'price'"></select>

这些都没有任何效果。 https://docs.angularjs.org/api/ng/filter/orderBy

Answer 1

您的 select 标记很好。这是有一些问题的数组。

• 不要在 js 中对键使用引号。
• 价格应为数字以便正确排序
• 使用 [] 将数组的所有元素括起来
• 不要从 js 调用 filter，因为您是从标记中调用它的。

示例:

$scope.pOptions = [{
    id: "0",
    name: "6 x 330ml",
    price: 0.00
}, {
    id: 1,
    name: "12 x 330ml",
    price: 2.00
}, {
    id: 1,
    name: "15 x 330ml",
    price: 4.00
}, {
    id: 1,
    name: "30 x 330ml",
    price: 1.00
}];

工作示例:https://plnkr.co/edit/n09iupr70zRX56kVrYK9?p=preview

编辑:由于数据像从后端 API 一样到达，您可以迭代对象键/属性并使用映射将子对象投影到数组:

$scope.pOptions = Object.keys($scope.pOptions).map(function(k) {
   var obj = $scope.pOptions[k];
   obj.price = parseFloat(obj.price);
   return obj;
});