fix(buttons): fix the binding models

This commit is contained in:
Alexander Zhukov 2017-07-21 16:35:36 +03:00
parent 0de4e0f9ee
commit d10c90c279
2 changed files with 30 additions and 20 deletions

View file

@ -5,15 +5,15 @@
<div class="col-md-12">
<div class="example-container">
<div class="container-title">Toggle Types</div>
<div class="btn-group btn-toggle-group btn-outline-toggle-group btn-group-full-width" data-toggle="buttons">
<label class="btn btn-outline-primary" [class.active]="checkboxModel.left">
<input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
<div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group btn-toggle-group btn-outline-toggle-group btn-group-full-width">
<label class="btn btn-outline-primary">
<input type="radio" value="left"> Left
</label>
<label class="btn btn-outline-primary" [class.active]="checkboxModel.middle">
<input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
<label class="btn btn-outline-primary">
<input type="radio" value="middle"> Middle
</label>
<label class="btn btn-outline-primary" [class.active]="checkboxModel.right">
<input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
<label class="btn btn-outline-primary">
<input type="radio" value="right"> Right
</label>
</div>
<div class="btn-group btn-toggle-group btn-group-full-width" data-toggle="buttons">
@ -95,26 +95,26 @@
</div>
<div class="example-container">
<div class="container-title">Divided Button Group</div>
<div class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width" data-toggle="buttons">
<label class="btn btn-outline-primary" [class.active]="checkboxModel.left">
<input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
<div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width">
<label class="btn btn-outline-primary">
<input type="radio" value="left"> Left
</label>
<label class="btn btn-outline-primary" [class.active]="checkboxModel.middle">
<input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
<label class="btn btn-outline-primary">
<input type="radio" value="middle"> Middle
</label>
<label class="btn btn-outline-primary" [class.active]="checkboxModel.right">
<input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
<label class="btn btn-outline-primary">
<input type="radio" value="right"> Right
</label>
</div>
<div class="btn-group btn-divided-group btn-group-full-width" data-toggle="buttons">
<label class="btn btn-primary" [class.active]="checkboxModel.left">
<input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
<label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.left">
<input type="checkbox" [(ngModel)]="dividedButtonGroupTwo.left"> Left
</label>
<label class="btn btn-primary" [class.active]="checkboxModel.middle">
<input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
<label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.middle">
<input type="checkbox" [(ngModel)]="dividedButtonGroupTwo.middle"> Middle
</label>
<label class="btn btn-primary" [class.active]="checkboxModel.right">
<input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
<label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.right">
<input type="checkbox" [(ngModel)]="dividedButtonGroupTwo.right"> Right
</label>
</div>
</div>