Делаю фильтр по цене, код js вот такой
(function () {
'use strict';
angular
.module('beo.products.controllers')
.controller('ProductsListController', ProductsListController);
ProductsListController.$inject = ['$scope', '$http', '$routeParams'];
/**
* @namespace ProductsListController
*/
function ProductsListController($scope, $http, $routeParams) {
var pctrl = this;
pctrl.spoilers = {
priceFilter: false,
brandFilter: false,
categoryFilter: true,
colorFilter: false,
dealsFilter: false,
storeFilter: false
};
//Configuring with beo.layuot.controllers.RootController method
$scope.setMainClasses('catalog-page');
activate();
/**
* @name changeInputState
* @desc Actions to be change state for inputs
* @memberOf beo.products.controllers.ProductsListController
*/
function changeInputState(event) {
angular.element(event.target).parent().toggleClass('active');
}
/**
* @name activate
* @desc Actions to be performed when this controller is instantiated
* @memberOf beo.products.controllers.ProductsListController
*/
function activate() {
$http.get('api/v1/products/').success(function (data) {
$scope.products = data;
$scope.categorySlug = $routeParams.categorySlug;
$scope.ProductSortLeft = '-id'; //по умолчанию фильтроваться будут по обновлению
$scope.vendorIncludes = [];
$scope.shopIncludes = [];
$scope.currentCategory = $routeParams.categorySlug;
$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 выглядит так:
<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>
фильтр использую так:
<div class="catalog-item" ng-repeat="product in products || filter: byPrice( filterPriceFrom, filterPriceTo) |orderBy:ProductSortLeft">
</div>
