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）これはこのコードを包みますか？ 'element'引数のために' $（ "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

ありがとう...より良いパフォーマンスが得られる方法で：usingこのライブラリまたはこのコードをラップするカスタムディレクティブを作成しますか？ – Simon

シモン、コードを確認してください、私のために働いて –

上記のサイト –

AngularJSの時間範囲スライダ

答えて

関連する問題