Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(buttons): fix the binding models

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

40
src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
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>

10
src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts
View file

@ -7,6 +7,8 @@ import { Component } from '@angular/core';
})
export class ButtonGroupsComponent {
radioModel = 'left';
checkboxModel = {
left: false,
middle: false,
@ -31,4 +33,12 @@ export class ButtonGroupsComponent {
four: false,
five: false,
};
dividedButtonGroupOne = 'left';
dividedButtonGroupTwo = {
left: false,
middle: false,
right: false,
};
}