Я пытаюсь реализовать ввод диапазона 2 слайдера с помощью jQuery
https://jqueryui.com/slider/#range
Но я не могу получить данные диапазона в 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:
$( 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 );
} );
Он должен вызвать функцию js (определенную с помощью ng-change), чтобы получить значения диапазона 2 ползунков:
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/>
Поэтому я думаю, что мне нужно получить значение диапазона 2 ползунков для ng-модели, чтобы использовать его для фильтрации таблицы
Как кто-нибудь знает, почему функция ng-change не запускается? Или любой совет, чтобы получить входное значение для углового контроллера. Благодарю!
Решено использовать следующую реализацию: https://jsfiddle.net/ValentinH/954eve2L/ Спасибо Shashank Vivek
Решено использовать следующую реализацию, которая использует 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>