Question

我是angularjs的新人，我无法在angularjs中创建像滑块一样的水平滑块。所以，任何人都可以帮助我。我尝试了自己，但错误来了。

  var myApp = angular.module("myApp", []);
  myApp.controller("SomeController", function($scope) {
    $scope.name="vicky";
    $scope.bar =document.getElementById('bar');
    $scope.slider =document.getElementById('slider');
    $scope.info = document.getElementById('info');
    $scope.set_per="";
$scope.ini = function() {
document.write(name);      
$scope.bar.addEventListener('mousedown', $scope.startSlide, false); 
$scope.bar.addEventListener('mouseup', $scope.stopSlide, false);

}

$scope.startSlide=function(event){

    $scope.set_perc = ((((event.clientX - $scope.bar.offsetLeft) / $scope.bar.offsetWidth)).toFixed(2));
    info.innerHTML = 'start' + $scope.set_perc+ '%';    
    $scope.bar.addEventListener('mousemove', $scope.moveSlide, false);  
    $scope.slider.style.width = ($scope.set_perc * 100) + '%';  
}

$scope.moveSlide=function(event){
    $scope.set_perc = ((((event.clientX - $scope.bar.offsetLeft) / $scope.bar.offsetWidth)).toFixed(2));
    $scope.info.innerHTML = 'moving : ' + $scope.set_perc + '%';
    $scope.slider.style.width = ($scope.set_perc * 100) + '%';
}

$scope.stopSlide=function(event){
    $scope.set_perc = ((((event.clientX - $scope.bar.offsetLeft) / $scope.bar.offsetWidth)).toFixed(2));
    $scope.info.innerHTML = 'done : ' + $scope.set_perc + '%';
    $scope.bar.removeEventListener('mousemove', $scope.moveSlide, false);
    $scope.slider.style.width = ($scope.set_perc * 100) + '%';
}

});

Answer 1

可能与输入类型范围有关根据您的需要定制

如何在angularjs中创建像滑块一样的水平滑块？

1 个答案: