jQueryの2つのスライダはAngularjs

Question

に値の範囲で取得私は2つのスライダーを実装しようとしていますが

https://jqueryui.com/slider/#range

jQueryの

を使用して入力の範囲しかし、私はangularjs

範囲のデータを取得することはできませんよ私は私のスライダーを実装する方法：

HTMLでは：

<p> 
    <label for="thresholdRange">Score threshold:</label> 
    <input type="text" ng-model="threshold" ng-change="change()" id="thresholdRange" readonly> 
</p> 
<div id="slider-range" style="margin-left: 1%; width: 50%"></div> 
<br/><br/> 

JavaScriptで0

：

$(function() { 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 100, 
     values: [ 25, 100 ], 
     slide: function(event, ui) { 
     $("#thresholdRange").val(ui.values[ 0 ]/100 + " - " + ui.values[ 1 ]/100); 
     console.log("Update minValue"); 
     $('[ng-controller="ValidationCtrl"]').scope().minValue = ui.values[ 0 ]; 
     var minValue = ui.values[ 0 ]; 
     console.log($('[ng-controller="ValidationCtrl"]').scope().minValue); 

     var appElement = document.querySelector('[ng-app=validationApp]'); 
     var $scope = angular.element(appElement).scope(); 
     $scope.$apply(function() { 
      $scope.minValue = ui.values[ 0 ]; 
     }); 
     } 
    }); 
    $("#thresholdRange").val($("#slider-range").slider("values", 0)/100 + 
     " - " + $("#slider-range").slider("values", 1)/100); 
    }); 

それは2つのスライダは値の範囲を取得する（NG-変化を利用して定義された）JS機能を起動する必要があります

var validationApp = angular.module('validationApp', []); 
validationApp.controller('ValidationCtrl', function ($scope, $window) { 
    $scope.change = function() { 
    $scope.minValue = $scope.threshold[0] 
    $scope.maxValue = $scope.threshold[1] 
    }; 
}); 

しかし、この機能がトリガされることはありません。私は

<tr ng-repeat="alignment in alignmentJson" ng-if="alignment.score >= minValue"> 
    <td><input type="text" id="{{alignment.index}}" name="index" value="{{alignment.index}}" style="display: none;" readonly>{{alignment.index}}</input></td> 
    <td><input type="text" id="{{alignment.score}}" name="score" value="{{alignment.score}}" style="display: none;" readonly>{{alignment.score}}</input></td> 
<tr/> 

をフィルタリングするために、テーブルを実装する方法

だから私は表に

をフィルタリングするためにそれを使用して、NG-モデルの範囲で、私は2つのスライダーの値を取得する必要があると思いますなぜ誰もが変更機能がトリガーされていないというアイデアは誰ですか？または、角度コントローラへの入力値を得るためのアドバイス。ありがとう！

は、次の実装を使用して解決しました：ShashankのVivekへhttps://jsfiddle.net/ValentinH/954eve2L/ おかげで

Answer 1

rzSliderを使用し、以下のインプリメンテーション使用して解決しました： https://jsfiddle.net/ValentinH/954eve2L/

<h2>Range slider</h2> 
Min Value: 
<input type="number" ng-model="minRangeSlider.minValue" /> 
<br/>Max Value: 
<input type="number" ng-model="minRangeSlider.maxValue" /> 
<br/> 
<rzslider rz-slider-model="minRangeSlider.minValue" rz-slider-high="minRangeSlider.maxValue" rz-slider-options="minRangeSlider.options"></rzslider>