In the above code i want to display initial state of checkboxes as mentioned in initialstatus array in UI and then i may change randomly any checkbox in initialStatus .. which should be reflected in initialsatus array.
<div class="container" [hidden]="submitted">
<form ng-app="app" (submit)="onSubmit()">
<div *ngFor="let initial of initialState,let j = index" >
<div *ngIf="initial.checked==true">
<button class="button" type="button">Device </button>
<label class="switch">
<input type="checkbox" name= "checked" id="checkbox_category" checked />
<div class="slider round"></div>
</label>
<br/>
</div>
<div *ngIf="initial.checked==false">
<button class="button" type="button">Device</button>
<label class="switch">
<input type="checkbox" id="checkbox_category" name= "checked" />
<div class="slider round"></div>
</label>
<br/>
</div>
</div>
<button class="buttons" type="submit">Submit</button>
<button (click)="resetAll()">Reset</button>
<button (click)="selectAll()">selectALL</button>
</form>
</div>
export class DashboardComponent{
submitted:boolean;
model= new SendDetails();
initialState:any = [{checked:true},{checked:false},{checked:true},{checked:false},{checked:true},{checked:false}];
intendedDeviceStatus: any = this.initialState;
constructor(
) {
this.submitted=false;
}
onSubmit(){
this.submitted=true;
this.model.initSession();
}
resetAll() {
this.initialState.forEach((initial:any) => {
initial.checked = false;
}
)}
selectAll() {
this.initialState.forEach((initial:any) => {
initial.checked = true;
}
)}
}
}
But its not happening ....im able to show initial status separately and anychanges made in UI are reflected back in Array. To achieve InitialStatus display my input tag is mentioned as above and to achieve two way binding i need to add ngmodel into my input tag
in my input tag.But i'm unable to achieve both at same time. How to achieve two way binding and displaying some check boxes as checked and few as unchecked.
Aucun commentaire:
Enregistrer un commentaire