Using tour of heroes for a a reference that I am trying to modify for what I want to do.
When the page loads I will have multiple choices for a user to decide which item is to be used.
I want the checkbox unselected unless the list item is selected. Two problems are the checkbox doesnt show unless i select an item, and selecting an item doesnt check the box. just makes it appear. Image of two boxes selecting input sample code below. HTML CODE
<div class="card-box">
<div class="card-row">
<div class="col-md-12">
<h3>Duns Number <span class="float-right" *ngIf="selectedHero">
<input #selectedHero id="selectedHero" type="checkbox" [checked]="selectedHeroBox"
(change)="onselectedHero(selectedHero.checked)" type="checkbox">
</span>
</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="greyColor">numeric field</p>
</div>
</div>
<div class="row padTop30">
<div class="col-md-12 selItem" style="cursor: pointer;">
<ul class="heroes">
<li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
</li>
</ul>
</div>
</div>
</div>
Component
heroes = HEROES;
selectedHero: Hero;
selectedHeroBox: boolean;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
public onselectedHero(value: boolean) {
this.selectedHeroBox = value;
}
Aucun commentaire:
Enregistrer un commentaire