我尝试将 Jquery-ui 滑块与 angular2 一起使用。我想让变量“slideValue”显示滑块的值,但我不知道如何将我的模型或变量从角度绑定到滑块。这是我的滑块组件:
import {Component, ElementRef, Inject, OnInit} from 'angular2/core';
declare var jQuery:any;
@Component({
selector: 'slider',
template:
`
<input type="text" [(ngModel)]="slideValue" id="amount" required placeholder="Enter a name here">
<div id="slider"></div>
<h2>slideValue = {{slideValue}}</h2>
`
})
export class Slider implements OnInit {
elementRef: ElementRef;
slideValue: number;
constructor(@Inject(ElementRef) elementRef: ElementRef) {
this.elementRef = elementRef;
}
ngOnInit() {
jQuery(this.elementRef.nativeElement).find("#slider").slider({
range: false,
orientation: "vertical",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
this.slideValue = ui.value; //doesn't seem to work
$( "#amount" ).val( ui.value );
}
});
}
}
代码可以在这里找到:
https://github.com/nerg/slider https://github.com/nerg/slider
我希望能够在 Angular2 中使用任何“垂直滑块”,所以如果存在另一个可行的解决方案,我很感兴趣(我已经检查过材料,但它似乎没有“Angular2”准备好,只有水平滑块) 。
您需要使用正确的上下文(this
) 在幻灯片回调内部。在这种情况下,箭头函数就可以解决问题:
@Component({
selector: 'slider',
template: `
<input type="text" [(ngModel)]="slideValue" class="amount" required placeholder="Enter a name here">
<div class="slider"></div>
<h2>slideValue = {{slideValue}}</h2>
`
})
export class Slider implements OnInit {
elementRef: ElementRef;
slideValue: number;
constructor(@Inject(ElementRef) elementRef: ElementRef) {
this.elementRef = elementRef;
}
ngOnInit() {
var $amount = jQuery(this.elementRef.nativeElement).find(".amount");
jQuery(this.elementRef.nativeElement).find(".slider").slider({
range: false,
orientation: "vertical",
min: 0,
max: 100,
value: 60,
slide: (event, ui) => {
this.slideValue = ui.value;
$amount.val(ui.value);
}
});
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)