如何实现在AngularJS jQuery的滑块范围 [英] How to implement jQuery range slider in AngularJS

查看:112
本文介绍了如何实现在AngularJS jQuery的滑块范围的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图使用 anuglar滑块在我现有的AngularJS应用程序。

I am trying to use anuglar-slider in my existing AngularJS app.

我跟着笔者的评论这里

I followed the author's comments here

我下载从下面笔者github上的文件(在头标记),并加入我的 index.html的

I downloaded below files (in Head tag) from author's github and added in my index.html

HTML code

<head>  

<link rel="stylesheet" href="css/angular-slider.css">
<script src="js/vendor/angular-slider.js"></script>

</head>
<body>

  <slider floor="10" ceiling="60" ng-model-low="lowValue" ng-model-high="highValue"></slider>

</body>   

App.js (角code)。我添加第二行根据作者的指示,我怀疑我做什么不对劲的地方。

App.js (Angular code) . I added second line as per Author's instructions, I suspect I did do something wrong there

var app = angular.module('myApp', [])
angular.module('uiSlider', []);

app.constant('Config',
{
    baseURL : "http://blah",
    httpTimeout : 36000
});
app.config(function($logProvider) {
    $logProvider.debugEnabled(true);
});
 //and some other app specific code follows

我没有看到任何浏览器滑块渲染。然而,在应用上了年纪角特定功能仍然有效,并且在浏览器的控制台没有错误。

I don't see any slider rendering in browser. However, the older Angular specific functionality in the app still works and there is no error in browser's console.

如果您无法找到上述问题,随时提出任何其他的方式来实施的范围滑块在AngularJS应用程序。

If you cannot find problem above, feel free to suggest any other way to implement range slider in AngularJS app.

我是相当新的AngularJS

I am fairly new to AngularJS

让我知道如果你喜欢我在这里发表作者的库文件code为好。

Let me know if you like me to post Author's library file code here as well.

推荐答案

好吧,我发现当preparing这个,但现在它的工作一些麻烦:

Ok I found some troubles when preparing this but now it's working:

成立的烦恼:


  • 它需要angularjs版本 1.1.4或更高版本

  • 您需要有滑盖template.html 文件

  • 和像@Pascal说你需要包括 uiSlider

var app = angular.module('myApp', ['uiSlider'])


  • I prepared为你工作演示如下。我希望它会帮助你

  • 演示

    DEMO

    这篇关于如何实现在AngularJS jQuery的滑块范围的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆