获取jQuery的2滑块范围值Angularjs

我想实现一个2个滑块使用jQuery获取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/>

在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函数来获取2个滑块（使用NG-变化定义）值范围：

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/ 感谢沙善维韦克

来源

2016-07-18 vemonet

为什么使用jquery与角度，你知道它不是一个推荐做法。尝试角度滑块，如：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滑块范围值Angularjs

回答

相关问题