jQuery를 2 슬라이더

사용하여 입력 범위를 구현하기 위해 노력하고 AngularJS와 값을 범위를 얻기하지만 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/>

내 슬라이더를 구현하는 방법 자바 스크립트 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] 
    }; 
});

을하지만 함수는 트리거되지 않는다. 나는 테이블을 구현하는 방법

그래서 나는 테이블을

으로 필터링하는 데 사용할 수있는 NG 모델 범위를 2 개 슬라이더의 값을 얻을 필요가 있다고 생각

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

를 필터링 할 누구나 왜 변경 기능이 실행되지 않는지 알 수 있습니까? 또는 각도 컨트롤러에 입력 값을 얻기위한 조언. 감사!

다음 구현을 사용하여 해결 : 비벡

Shashank에 https://jsfiddle.net/ValentinH/954eve2L/ 감사 는

출처

2016-07-18 vemonet

왜 각도와 jQuery를 사용하기를, U는 권장하지 알고 접근. 다음과 같은 각도 슬라이더를 사용해보십시오 : https://jsfiddle.net/ValentinH/954eve2L/ –

잘 작동했습니다! 고마워요. 이걸 사용하겠습니다. – vemonet

위대한 건배! –

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>

출처

2016-07-18 17:49:15 vemonet

jQuery를 2 슬라이더

답변

관련 문제