AngularJS 可排序订单定价问题答案

【问题标题】：AngularJS Sortable order pricing issueAngularJS 可排序订单定价问题
【发布时间】：2017-11-14 17:10:48
【问题描述】：

在订购货币格式的价格时遇到问题。

var myApp = angular.module("myApp", []);

myApp.factory("Purchases", function() {
  var Purchases = {};

  Purchases.data = [{
      date: "10/05/2012",
      text: "1 Lorem ipsum dolor sit amet ipsum dolor",
      price: "£90",
      availability: "1 Available until 10th Dec 2013"
    },
    {
      date: "24/05/2012",
      text: "2 Lorem ipsum dolor sit amet ipsum dolor",
      price: "£9.5",
      availability: "2 Available until 10th Dec 2013"
    },
    {
      date: "20/05/2012",
      text: "3 Lorem ipsum dolor sit amet ipsum dolor",
      price: "£10",
      availability: "3 Available until 10th Dec 2013"
    }
  ];
  return Purchases;
});

function PurchasesCtrl($scope, Purchases) {
  $scope.purchases = Purchases;
  $scope.sort = {
    column: '',
    descending: false
  };
  $scope.changeSorting = function(column) {

    var sort = $scope.sort;

    if (sort.column == column) {
      sort.descending = !sort.descending;
    } else {
      sort.column = column;
      sort.descending = false;
    }
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="PurchasesCtrl">
    <h2>Purchases:</h2>
    <table cellspacing="0">
      <tr class="first">
        <th class="first" ng-click="changeSorting('date')">Date</th>
        <th ng-click="changeSorting('text')">Description</th>
        <th ng-click="changeSorting('price')">Amount</th>
        <th ng-click="changeSorting('availability')">Status</th>
      </tr>
      <tr ng-repeat="purchase in purchases.data|orderBy:sort.column:sort.descending">
        <td class="first">{{purchase.date}}</td>
        <td>{{purchase.text}}</td>
        <td>{{purchase.price}}</td>
        <td>{{purchase.availability}}</td>
      </tr>
    </table>
  </div>
</div>

发布顺序：$9.5 > $10
有什么方法可以更正排序吗？

【问题讨论】：

请编辑您的问题以在此处也包含代码。外部链接会随着时间的推移而改变或消失，然后在将来这个问题可能没有意义。您还可以在这个问题中制作一个可运行的 StackSnippet，而无需像 JSFiddle 这样的外部站点来制作演示。见stackoverflow.com/help/how-to-ask
复制小提琴到问题

标签： angularjs jquery-ui-sortable

【解决方案1】：

是的，请检查这个小提琴：http://jsfiddle.net/2u3wn91z/1/。你想比较numbers，而不是strings，所以你需要分开currency（作为price的第一个字母），然后从price中删除currency）：

  Purchases.data = Purchases.data.map(function (purchase) {
    purchase.currency = purchase.price.charAt(0);
    purchase.price = Number(purchase.price.substr(1));
    return purchase;
  });
   $scope.purchases = Purchases;

当您将价格与货币分开时，您可以单独显示：

<td>{{purchase.currency}}{{purchase.price}}</td>

【讨论】：