ng-repeat sorting for price 不合适

Question

我正在使用 angular ng-repeat 和 orderBy 作为产品目录页面，以便根据 select 更改订购产品。

此处 orderBy 名称工作正常，但在定价时它会这样排序 1,10,11,12,13,14,2,3,4,5,6,7,8,9 因为它只检查第一个值。

我需要这样的结果1,2,3,4,5,6,7,8,9,10,11,12,13,14

select html

<select ng-model="sortFilter" ng-init="sortFilter='name'">
    <option value="name">Default</option>
    <option value="price">Price Low to High</option>
    <option value="-price">Price High to Low</option>
</select>

产品html

<div class="col-sm-3" ng-repeat="product in products | orderBy:sortFilter">
    <div class="product_box clearfix">
        <div class="product_img">
            <img src="images/{{product.imgLink}}">
        </div>
        <div class="product_right">
            <div class="product_details">
                <p class="product_name">{{product.name}}</p>
                <p class="product_price">{{product.price}}</p>
            </div>
            <div class="buy_product">
                <p><a href="{{product.link}}"><i class="fa fa-shopping-cart"></i> Buy Now</a></p>
            </div>
        </div>
    </div>

产品 ng-重复代码

$scope.products = [
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 14.00', link: '#'},
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 13.00', link: '#'},
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 12.00', link: '#'},
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 11.00', link: '#'},
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 10.00', link: '#'},
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 9.00', link: '#'},
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 8.00', link: '#'},
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 7.00', link: '#'},
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: '$ 6.00', link: '#'},
    {imgLink: 'product1.jpg', name: 'eWingtip Congnac Oxford', price: '$ 5.00', link: '#'},
    {imgLink: 'product1.jpg', name: 'dWingtip Congnac Oxford', price: '$ 4.00', link: '#'},
    {imgLink: 'product1.jpg', name: 'cWingtip Congnac Oxford', price: '$ 3.00', link: '#'},
    {imgLink: 'product1.jpg', name: 'bWingtip Congnac Oxford', price: '$ 2.00', link: '#'},
    {imgLink: 'product1.jpg', name: 'aWingtip Congnac Oxford', price: '$ 1.00', link: '#'},
];

Answer 1

您需要将价格转换为数字。您可以调用 parseInt(price)，以快速执行此操作。

Answer 2

将您的 HTML 更改为：

<select ng-model="sortFilter" ng-init="sortFilter='name'">
    <option value="name">Default</option>
    <option value="sort_price">Price Low to High</option>
    <option value="-sort_price">Price High to Low</option>
</select>
<div class="col-sm-3" ng-repeat="product in products | orderBy:sortFilter" ng-init="product.sort_price = parsePriceToFloat(product.price)">
    <div class="product_box clearfix">
        <div class="product_img">
            <img src="images/{{product.imgLink}}">
        </div>
        <div class="product_right">
            <div class="product_details">
                <p class="product_name">{{product.name}}</p>
                <p class="product_price">{{product.price}}</p>
            </div>
            <div class="buy_product">
                <p><a href="{{product.link}}"><i class="fa fa-shopping-cart"></i> Buy Now</a></p>
            </div>
        </div>
    </div>
</div>

并在控制器中添加一个函数：

$scope.parsePriceToFloat = function(price) {
    return Number(String(price).replace(/[^0-9\.]+/g,""));
}

parsePriceToFloat 函数将删除任何非数字值和 return 一个数字类型，然后可以按您的 orderBy 代码排序。

Answer 3

在处理 currency/numbers 时，您应该存储数字类型的数据类型。

那就不用解析价格了！

然后您可以轻松地 display/calculate/sort 您想要的数据，没有任何问题，因为它的格式正确。

将您的价格属性更改为数字：

$scope.products = [
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 14, link: '#'},
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 13, link: '#'},
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 12, link: '#'},
    {imgLink: 'product1.jpg', name: 'Wingtip Congnac Oxford', price: 11, link: '#'},
...
];

然后：

<p class="product_price">${{product.price}}</p>

或使用 currency filter:

<p class="product_price">{{product.price | currency: '$'}}</p>

ng-repeat sorting for price 不合适

ng-repeat sorting for price inappropriate

html

javascript

angularjs

angularjs-orderby