ng由于价格不合适而重复排序

ng-repeat sorting for price inappropriate

本文关键字：排序 不合适 于价格 ng      更新时间：2023-09-26

我将角度ng-repeat和orderBy用于产品目录页面，以根据选择的更改订购产品。

这里的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

选择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: '#'},
];

在处理货币/数字时，应该存储类型为number的数据类型。

那么就没有必要解析价格了！

然后，您可以轻松地按照自己的意愿显示/计算/排序数据，而不会出现任何问题，因为数据的格式是正确的。

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

$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>

或者使用货币过滤器：

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

将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函数将删除任何非数字值，并返回一个Number类型，然后可以根据orderBy代码对其进行排序。

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

相关文章：