Why my filter doesn't work

Question

I make filter by price, my js code bellow

 (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:

 <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

Answer 1

Your $scope.apply code in the slider function should be updating a $scope variable, not calling the byPrice() function.

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.

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