Question

我有一个使用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中使用这样的东西或者是否可以转换这变成了角色？

Answer 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>

AngularJS的时间范围滑块

1 个答案: