Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +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="col-md-12">
<div class="example-container"> <div class="example-container">
<div class="container-title">Toggle Types</div> <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"> <div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group btn-toggle-group btn-outline-toggle-group btn-group-full-width">
<label class="btn btn-outline-primary" [class.active]="checkboxModel.left"> <label class="btn btn-outline-primary">
<input type="checkbox" [(ngModel)]="checkboxModel.left"> Left <input type="radio" value="left"> Left
</label> </label>
<label class="btn btn-outline-primary" [class.active]="checkboxModel.middle"> <label class="btn btn-outline-primary">
<input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle <input type="radio" value="middle"> Middle
</label> </label>
<label class="btn btn-outline-primary" [class.active]="checkboxModel.right"> <label class="btn btn-outline-primary">
<input type="checkbox" [(ngModel)]="checkboxModel.right"> Right <input type="radio" value="right"> Right
</label> </label>
</div> </div>
<div class="btn-group btn-toggle-group btn-group-full-width" data-toggle="buttons"> <div class="btn-group btn-toggle-group btn-group-full-width" data-toggle="buttons">
@ -95,26 +95,26 @@
</div> </div>
<div class="example-container"> <div class="example-container">
<div class="container-title">Divided Button Group</div> <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"> <div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width">
<label class="btn btn-outline-primary" [class.active]="checkboxModel.left"> <label class="btn btn-outline-primary">
<input type="checkbox" [(ngModel)]="checkboxModel.left"> Left <input type="radio" value="left"> Left
</label> </label>
<label class="btn btn-outline-primary" [class.active]="checkboxModel.middle"> <label class="btn btn-outline-primary">
<input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle <input type="radio" value="middle"> Middle
</label> </label>
<label class="btn btn-outline-primary" [class.active]="checkboxModel.right"> <label class="btn btn-outline-primary">
<input type="checkbox" [(ngModel)]="checkboxModel.right"> Right <input type="radio" value="right"> Right
</label> </label>
</div> </div>
<div class="btn-group btn-divided-group btn-group-full-width" data-toggle="buttons"> <div class="btn-group btn-divided-group btn-group-full-width" data-toggle="buttons">
<label class="btn btn-primary" [class.active]="checkboxModel.left"> <label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.left">
<input type="checkbox" [(ngModel)]="checkboxModel.left"> Left <input type="checkbox" [(ngModel)]="dividedButtonGroupTwo.left"> Left
</label> </label>
<label class="btn btn-primary" [class.active]="checkboxModel.middle"> <label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.middle">
<input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle <input type="checkbox" [(ngModel)]="dividedButtonGroupTwo.middle"> Middle
</label> </label>
<label class="btn btn-primary" [class.active]="checkboxModel.right"> <label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.right">
<input type="checkbox" [(ngModel)]="checkboxModel.right"> Right <input type="checkbox" [(ngModel)]="dividedButtonGroupTwo.right"> Right
</label> </label>
</div> </div>
</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 { export class ButtonGroupsComponent {
radioModel = 'left';
checkboxModel = { checkboxModel = {
left: false, left: false,
middle: false, middle: false,
@ -31,4 +33,12 @@ export class ButtonGroupsComponent {
four: false, four: false,
five: false, five: false,
}; };
dividedButtonGroupOne = 'left';
dividedButtonGroupTwo = {
left: false,
middle: false,
right: false,
};
} }