我试图在角度中使用jquery旋钮,并且我已经创建了一个指令以便使用它。
现在,我已经看过很多jquery旋钮示例,在大多数情况下,表盘中央显示的是当前值...但不是我的情况! 而且,我如何将数字设置为没有DECIMALS?
这是我的html和angular指令代码:
HTML
<knob ng-model="temp" value="0"></knob>
<input type="text" ng-model="temp">
knob.js
angular.module('knob', [])
.directive('knob', function () {
return {
restrict: 'E',
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
element.knob({
min: attrs.min,
max: attrs.max,
thickness: .2,
step: .5,
angleOffset: -125,
displayInput: true,
angleArc: 250,
change: function (value) {
scope.$apply(function () {
ngModel.$setViewValue(value);
});
}
});
ngModel.$render = function () {
element.val(ngModel.$viewValue).trigger("change");
};
}
};
});
以下是浏览器的外观:
在这里我是多么喜欢它(不是谈论颜色,而是关于中间显示为INT的值)
非常感谢提前
修改
正如所建议的,我用roundSlider替换了jquery旋钮,但我有几个问题可以在这里找到: http://jsbin.com/doketasuju/edit?html,output
1)为什么我的白色背景为&#34;菱形&#34;我不想要的风格?
2)如果我在输入中输入内容,它就不起作用了!
这是我将如何使用它的一个例子,但我需要先解决这几个问题。 感谢
编辑2
像这样添加标签:
显然,它应显示滑块属性的最小值和最大值
答案 0 :(得分:1)
我已使用jQuery roundSlider插件实现了您的要求。
它支持内置的角度绑定,因此无需在外部为此创建自定义指令。
请从这里查看演示:
有关 roundSlider 的详细信息,请查看demos和documentation页。
希望它对你有所帮助......
1)通过设置与背景相对应的滑块bg颜色,您可以解决此问题。
.rs-bg-color {
background: gray;
}
2)在使用指令时解决了这个问题。
答案 1 :(得分:1)
目前没有标签支持的内置选项。但您可以使用内部代码实现该功能。请查看以下演示:
通过调整PageNavigation
和.num1 span
类的边距值,您可以定位标签。
使用半滑块进行演示:http://jsbin.com/tamumo/edit?html,output