angularjs 基于角js的价格排序产品

gojuced7 于 2022-11-21 发布在 Angular

关注(0)|答案(2)|浏览(151)

[{
        "title":"Men's Polo",
        "sku":"menspolo",
        "img":"images/mens/mens polo front.png",
        "oldprice":675,
        "newprice":650,
        "latest":"latest",
        "desc":"Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit"

    },
    {
        "title":"Women's Full Sleeve",
        "sku":"womensfullsleeve",
        "img":"images/womens/women polo front.png",
        "oldprice":666,
        "newprice":633,
        "desc":"Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit"

    },
    {
        "title":"Women's Sleeve less",
        "sku":"menssleeveless",
        "img":"images/womens/womens hoodie front.png",
        "oldprice":599,
        "newprice":499,
        "desc":"Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit"

    },
    {
        "title":"Women's Hoodie",
        "sku":"menshoodie",
        "img":"images/womens/womens t-shirts-front.png",
        "oldprice":680,
        "newprice":650,
        "featured":"featured",
        "desc":"Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit"

    }
]

这是我的product.json文件，我正在开发一个商店应用程序，我想在页面中设置价格过滤器，

<form class="form-group form-inline">
    <input type="radio" name="filter" class="form-control"  ng-model="priceFilter" checked>&nbsp
    <label class="control-label">Low to High</label>&nbsp&nbsp
    <input type="radio" name="filter" class="form-control" value="reverse"  ng-model="priceFilter">&nbsp
    <label class="control-label">High to Low</label>
</form>

上面的代码是我的html代码，用于filter的

<div class="ProductStore" ng-controller="ProductController">
            <div class="col-sm-4" ng-repeat="product in ProductList | filter:newprice | orderBy:newprice:priceFilter">
            <a href="#/details/{{ProductList.indexOf(product)}}" class="pdt-anchor">
            <div class="panel panel-primary" >
                <div class="panel-body">
                    <img ng-src="{{product.img}}" width="100%" height="100%">
                    <h4 class="pdt-title"><center>{{product.title}}</center></h4></a>
                    <center><p class="price"><span class="old">Rs.{{product.oldprice}}</span><span class="new">Rs.{{product.newprice}}</span></p></center>
                    <button class="btn btn-block btn-primary">Buy Now</button>
                    <button class="btn btn-block btn-warning">Add to cart</button>
                </div>
            </div>

这是重复产品的HTML代码，
我想做的是，当我单击“从低到高”单选按钮时，我想让产品按从低到高的价格范围排列，而当我单击“从高到低”单选按钮时，我想让产品按从高到低的价格范围列出。如何完成此任务？

angularjs

来源：https://stackoverflow.com/questions/33912862/sorting-products-based-on-price-in-angular-js

2条答案

按热度按时间

ev7lccsx1#

由于您希望priceFilter在选中从高到低时为true（按逆序排序），在选中从低到高时为false（按升序排序），因此需要将这些值分配给单选按钮：

<input type="radio" name="filter" class="form-control"  ng-model="priceFilter" ng-value="false" />
<label class="control-label">Low to High</label>

<input type="radio" name="filter" class="form-control"  ng-model="priceFilter" ng-value="true" />
<label class="control-label">High to Low</label>

此外，视图中的排序依据应为

orderBy:'newprice':priceFilter

我不确定您使用filter:newprice的目的是什么。它可能不应该在那里。

赞(0）回复(0）举报 2022-11-21

0lvr5msh2#

--品牌--{{pdt.品牌}}

<select class="select select-styled" ng-model="selectedPriceFilter" ng-options="option for option in options" ng-change="selectPriceFilter(selectedPriceFilter)">
<option value="">-- Price --</option>       
 </select>

    <input class="search" placeholder="Search" id="search" size="40" type="text" ng-model="searchKeyword">
</div>

//创建具有'低价到高价'和'高价到低价'值的作用域变量选项。$scope.options =['低价到高价'，'高价到低价'];

//add selectPriceFilter function that assign scope priceFilter to true / false based on condition
$scope.selectPriceFilter = function (selectedPriceFilter) {

    if (selectedPriceFilter == 'Low Price to High') {
        $scope.selectedPriceFilter = false;
    } else if (selectedPriceFilter == 'High Price To Low') {
        $scope.selectedPriceFilter = true;
    }
};

赞(0）回复(0）举报 2022-11-21

我来回答

angularjs 基于角js的价格排序产品

2条答案

相关问题

热门标签

最新问答