0
私はAngular 4プロジェクトにBootstrapSwitchライブラリを実装しようとしています。私は、以下のディレクティブを作成しました:BootstrapSwitchDirectiveがAngular4のngModelで動作しない
import {Directive, ElementRef, Input, AfterViewInit} from '@angular/core';
@Directive({ selector: '[switch]' })
export class SwitchDirective implements AfterViewInit {
@Input() onText: string;
@Input() offText: string;
@Input() labelText: string;
directive: any;
constructor(el: ElementRef) {
this.directive = $(el.nativeElement);
$.fn.bootstrapSwitch.defaults.onColor = 'success';
}
ngAfterViewInit() {
var options = {
onText: this.onText,
offText: this.offText,
labelText: this.labelText,
};
this.directive.bootstrapSwitch(options);
this.directive.on('switch-change', function() {
this.directive.bootstrapSwitch('toggleRadioState');
});
this.directive.on('switch-change', function() {
this.directive.bootstrapSwitch('toggleRadioStateAllowUncheck');
});
this.directive.on('switch-change', function() {
this.directive.bootstrapSwitch('toggleRadioStateAllowUncheck', false);
});
}
}
を私の入力構造がある:私はと結合しようとすると、しかし
<button (click)="submit(switch1.checked, switch2.checked)">Submit</button>
:
<input type="checkbox" class="make-switch" onText="Y" offText="N" labelText="Switch 1" switch #switch1>
<input type="checkbox" class="make-switch" onText="Y" offText="N" labelText="Switch 2" switch #switch2>
私は以下のように提出する形でそれを使用することができますngModel、それは動作していません。
<input type="checkbox" class="make-switch" onText="Y" offText="N" labelText="Switch 1" switch [(ngModel)]="selectedItem.switch1" name="switch1" [checked]="selectedItem.switch1== 1">
<input type="checkbox" class="make-switch" onText="Y" offText="N" labelText="Switch 2" switch [(ngModel)]="selectedItem.switch2" name="switch2" [checked]="selectedItem.switch2 == 1">
は何行方不明私がangularjsで以下のように同様のアプローチを推測です:
element.on('switchChange.bootstrapSwitch', function(event, state) {
if (ngModel) {
scope.$apply(function() {
ngModel.$setViewValue(state);
});
}
});
すべてのヘルプは高く評価されています。