AngularJS使用对象属性排序多个对象数组

AngularJS order multiple objects array with object property

本文关键字：对象 数组 排序 属性 AngularJS      更新时间：2023-09-26

我有一个多对象数组：

{
   "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应该是第二个。

控制器内：

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

在我的视图中，我正在使用ng选项填充选择选项：

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

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

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到达的数据，您可以迭代对象键/属性，并使用map将子对象投影到数组：

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