Get jQuery 2 Schieber Werte reichen bis AngularJS

Question

I a 2 Schieber Eingang jQuery

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

mit reichen umzusetzen versuchen Aber ich bin nicht in der Lage, die Daten des Bereichs in AngularJS

zu erhalten Wie ich meine Schieber implementieren:

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

Im javascript:

$(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); 
    }); 

Es sollte eine js Funktion auslösen (definiert ng Wechsel verwendet wird) die 2 Schieber zu bekommen reichen Werte:

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

Aber diese Funktion wird nie ausgelöst.

Wie ich den Tisch implementieren werden

gefiltert

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

Also ich denke, ich brauche den Wert der zwei Schieberegler, um ein ng-Modell reichen, um es zu verwenden, um den Tisch

Wie zu filtern jemand eine Idee warum die ng-change Funktion nicht ausgelöst wird? Oder ein Ratschlag, um den Eingangswert zum Winkelregler zu bekommen. Vielen Dank!

Gelöst die folgende Implementierung mit: https://jsfiddle.net/ValentinH/954eve2L/ Dank Shashank Vivek

Answer 1

Gelöst die folgende Implementierung verwenden, die rzSlider verwenden: 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>