代码之家  ›  专栏  ›  技术社区  ›  n2lose

AngularJS可排序订单定价问题

  •  0
  • n2lose  · 技术社区  · 7 年前

    我在订购货币形式的价格时面临一个问题。

    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
    有什么方法可以更正订单吗?

    1 回复  |  直到 7 年前
        1
  •  0
  •   Radek Anuszewski    7 年前

    是的,检查这把小提琴: http://jsfiddle.net/2u3wn91z/1/ . 你想比较一下 number s、 不是 string s、 所以你需要分开 currency (作为 price )然后移除 通货 从…起 ):

      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>