AngularJS 的时间范围滑块
Posted
技术标签:
【中文标题】AngularJS 的时间范围滑块【英文标题】：Time range slider for AngularJS 【发布时间】：2016-11-17 08:05:26 【问题描述】：我有一个使用 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 实现 完全相同的结果，因为我是 在 Angular 项目中工作。
知道这样的东西是否可以在 angularJS 中使用或者是否可以转换 这成角度？
【问题讨论】：
您是否尝试过创建一个包装此代码的directive？只需将$("#slider-range") 换成 element 参数
jsfiddle.net/lsiv568/WJqx7/1
【参考方案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>
【讨论】：
谢谢...顺便说一句，性能更好：使用这个库或者创建一个包装这个代码的自定义指令？ 从上述站点下载 angular.rangeSlider.css 和 angular.rangeSlider.js 好的，谢谢...它现在可以工作了...无论如何控制滑块的宽度...现在它在整个页面上伸展...。另外请告诉哪个更好的性能明智的：使用这个库或者创建一个包装这个代码的自定义指令？以上是关于AngularJS 的时间范围滑块的主要内容，如果未能解决你的问题，请参考以下文章