私のフィルタは

Question

動作しないのはなぜ私は価格でフィルタを作成し、私は価格で製品をフィルタリングするスライダーを作成する

(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怒鳴る私のJSコード：

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

私はスライダー機能で

Answer 1

あなた$scope.applyコードがbyPrice()関数を呼び出し、$scope変数ではなく更新されなければならないミスを犯したところ私の問題は、フィルタ内の値の転送は動作しないということで、私に教えてください。

scope.$apply(function() { 
    scope.minValue = ui.values[0]; 
    scope.maxValue = ui.values[1]; 
}); 

あなたのフィルタ機能は、それがng-repeatディレクティブで参照されますときにそれを表示または非表示になりますいずれかが、trueまたはfalseのいずれかを返す必要があります。

$scope.byPrice = function (item) { 
    if (item.price >= scope.minValue && item.price <= scope.maxValue) { 
     return true 
    } else { 
     return false; 
    } 
}; 

それとも、動的に同じテストに基づいて要素を表示または非表示にng-showとng-hideを使用することができます。