I make filter by price, my js code bellow
我按价格过滤,我的js代码吼叫
(function () {
'use strict';
angular
.module('beo.products.controllers')
.controller('ProductsListController', ProductsListController);
ProductsListController.$inject = ['$scope', '$http', '$routeParams'];
activate();
function activate() {
$http.get('api/v1/products/').success(function (data) {
$scope.products = data;
$scope.filterPriceFrom = 0;
$scope.filterPriceTo = 200000;
$("#ex2").slider({
range: true,
min: 0,
max: 200000,
values: [0, 200000],
slide: function (event, ui) {
var from = $("#price-from");
from.val(ui.values[0]);
var to = $("#price-to");
to.val(ui.values[1]);
var scope = angular.element($("#html")).scope(); //где #app_dom_id айди div в котором указан ng-app.
scope.$apply(function () {
scope.byPrice(ui.values[0], ui.values[1]);
});
}
});
$scope.byPrice = function (minValue, maxValue) {
return function predicateFunc(product) {
if (product.price >= minValue && product.price <= maxValue) {
return product
} else {
return null;
}
};
};
});
)();
html in which I create a slider to filter products by price:
html我在其中创建一个滑块来按价格过滤产品:
<div initpriceslider class="filter-content filter-price" ng-class="{opened: pctrl.spoilers.priceFilter}">
<div class="filter-wraper">
<div class="price-label">
<input type="text" id="price-from" name="price-from" ng-model="filterPriceFrom" readonly>
<input type="text" id="price-to" name="price-to" ng-model="filterPriceTo" readonly>
</div>
<div id="ex2" class="price-input"></div>
</div>
</div>
filter i use like these:
过滤器我使用如下:
<div class="catalog-item" ng-repeat="product in products | filter: byPrice( filterPriceFrom, filterPriceTo) |orderBy:ProductSortLeft">
</div>
My problem is that the transfer of value in the filter does not work, please tell me where I made mistakes
我的问题是过滤器中的值传输不起作用,请告诉我哪里出错了
1 个解决方案
#1
0
Your $scope.apply
code in the slider function should be updating a $scope
variable, not calling the byPrice()
function.
slider函数中的$ scope.apply代码应该更新$ scope变量,而不是调用byPrice()函数。
scope.$apply(function () {
scope.minValue = ui.values[0];
scope.maxValue = ui.values[1];
});
Your filter function should return either true
or false
, which will either show or hide it when it's referenced by the ng-repeat
directive.
您的过滤器函数应该返回true或false,当ng-repeat指令引用它时,它将显示或隐藏它。
$scope.byPrice = function (item) {
if (item.price >= scope.minValue && item.price <= scope.maxValue) {
return true
} else {
return false;
}
};
Or you can use ng-show
and ng-hide
to dynamically show or hide elements based on the same test.
或者,您可以使用ng-show和ng-hide基于相同的测试动态显示或隐藏元素。
#1
0
Your $scope.apply
code in the slider function should be updating a $scope
variable, not calling the byPrice()
function.
slider函数中的$ scope.apply代码应该更新$ scope变量,而不是调用byPrice()函数。
scope.$apply(function () {
scope.minValue = ui.values[0];
scope.maxValue = ui.values[1];
});
Your filter function should return either true
or false
, which will either show or hide it when it's referenced by the ng-repeat
directive.
您的过滤器函数应该返回true或false,当ng-repeat指令引用它时,它将显示或隐藏它。
$scope.byPrice = function (item) {
if (item.price >= scope.minValue && item.price <= scope.maxValue) {
return true
} else {
return false;
}
};
Or you can use ng-show
and ng-hide
to dynamically show or hide elements based on the same test.
或者,您可以使用ng-show和ng-hide基于相同的测试动态显示或隐藏元素。