AngularJS的时间范围滑块

我有一个使用 Jquery 和 JqueryUI 实现的时间范围滑块。

$("#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中是否可用，或者是否可以转换这成棱角？

您可以使用角度范围滑块

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>

相关内容

最新更新

热门标签：