AngularJS的時間範圍滑塊

我有一個使用Jquery和JqueryUI實現的時間範圍滑塊。AngularJS的時間範圍滑塊

$("#slider-range").slider({ 
range: true, 
min: 0, 
max: 1440, 
step: 15, 
values: [600, 720], 
slide: function (e, ui) { 
    var hours1 = Math.floor(ui.values[0]/60); 
    var minutes1 = ui.values[0] - (hours1 * 60); 

    if (hours1.length == 1) hours1 = '0' + hours1; 
    if (minutes1.length == 1) minutes1 = '0' + minutes1; 
    if (minutes1 == 0) minutes1 = '00'; 
    if (hours1 >= 12) { 
     if (hours1 == 12) { 
      hours1 = hours1; 
      minutes1 = minutes1 + " PM"; 
     } else { 
      hours1 = hours1 - 12; 
      minutes1 = minutes1 + " PM"; 
     } 
    } else { 
     hours1 = hours1; 
     minutes1 = minutes1 + " AM"; 
    } 
    if (hours1 == 0) { 
     hours1 = 12; 
     minutes1 = minutes1; 
    } 



    $('.slider-time').html(hours1 + ':' + minutes1); 

    var hours2 = Math.floor(ui.values[1]/60); 
    var minutes2 = ui.values[1] - (hours2 * 60); 

    if (hours2.length == 1) hours2 = '0' + hours2; 
    if (minutes2.length == 1) minutes2 = '0' + minutes2; 
    if (minutes2 == 0) minutes2 = '00'; 
    if (hours2 >= 12) { 
     if (hours2 == 12) { 
      hours2 = hours2; 
      minutes2 = minutes2 + " PM"; 
     } else if (hours2 == 24) { 
      hours2 = 11; 
      minutes2 = "59 PM"; 
     } else { 
      hours2 = hours2 - 12; 
      minutes2 = minutes2 + " PM"; 
     } 
    } else { 
     hours2 = hours2; 
     minutes2 = minutes2 + " AM"; 
    } 

    $('.slider-time2').html(hours2 + ':' + minutes2); 
}

}）;

這裏是當前時間滑塊上的小提琴：http://jsfiddle.net/jrweinb/MQ6VT/

我想要達到完全相同的結果使用AngularJS，因爲我在角項目。

任何想法，如果這樣的事情是在angularJS中可用或是否有可能將這轉換成角？

來源

2016-07-14 Simon

您是否嘗試過創建[指令]（https://docs.angularjs.org/guide/directive）包裝這個代碼？換掉'$（「＃slider-range」）''''''參數 –

http://jsfiddle.net/lsiv568/WJqx7/1/ –

可以使用角度範圍滑塊

http://danielcrisp.github.io/angular-rangeslider/

http://danielcrisp.github.io/angular-rangeslider/demo

<!doctype html> 
<html ng-app="myApp"> 
<head> 

    <title>Angular rangeSlider Demo</title> 

    <!-- Bootstrap CSS from CDN --> 
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> 

    <!-- Angular rangeSlider CSS --> 
    <link href="../angular.rangeSlider.css" rel="stylesheet"> 

</head> 
<body style="padding-bottom: 50px;"> 
    <div class="container" ng-controller="DemoController"> 

     <div class="row"> 
      <div class="span12"> 

       <pre> 
$scope.demo1 = { 
    min: 20, 
    max: 80 
};</pre> 
      </div>   
      <div class="span5"> 
       <h4>Default slider</h4> 

       <div range-slider min="0" max="100" model-min="demo1.min" model-max="demo1.max"></div> 
      </div> 
      <div class="span2"></div> 
      <div class="span5"> 
       <h4>Vertical slider</h4> 

       <div range-slider orientation="vertical" min="0" max="100" model-min="demo1.min" model-max="demo1.max"></div> 

      </div> 

     <hr /> 

     <hr /> 

    </div> 

    <!-- we need jQuery --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> 
    <!-- and Angular, of course --> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script> 
    <!-- and out directive code --> 
    <script src="../angular.rangeSlider.js"></script> 
    <!-- a basic app and controller --> 
    <script> 
     // basic angular app setup 
     var app = angular.module('myApp', ['ui-rangeSlider']); 

     app.controller('DemoController', 
      function DemoController($scope) { 

       // just some values for the sliders 
       $scope.demo1 = { 
        min: 20, 
        max: 80 
       }; 

      } 
     ); 

    </script> 
</body> 
</html>

來源

2016-07-14 12:08:05

謝謝...順便說一下，更好的表現方式：使用這個庫或創建一個封裝這段代碼的自定義指令？ – Simon

西蒙，檢查代碼，其工作對我 –

下載angular.rangeSlider.css和 angular.rangeSlider.js，從上述網站 –

AngularJS的時間範圍滑塊

回答

相關問題