Angular 2: multiples cases à cocher - angulaires

J'ai 5 cases à cocher de cette façon

<input type="checkbox" [checked]="chk1" (change)="chk1 = !chk1" />chk1 &nbsp;
<input type="checkbox" [checked]="chk2" (change)="chk2 = !chk2" />chk2 &nbsp;
<input type="checkbox" [checked]="chk3" (change)="chk3 = !chk3" />chk3 &nbsp;
<input type="checkbox" [checked]="chk4" (change)="chk4 = !chk4" />chk4 &nbsp;
<input type="checkbox" [checked]="chk5" (change)="chk5 = !chk5" />chk5 &nbsp;

J'essaie d'activer les cases à cocher. Les conditions sont-

Si la première case à cocher est sélectionnée, toutes les 4 autres cases à cocher doivent être décochées et inversement (même si seules les 2e et 3e cases sont sélectionnées)

Les 3ème et 4ème cases à cocher doivent être alternées.

Comment y parvenir en angulaire?

Lien Plunker

Réponses:

Pour résoudre le problème, vous pouvez créer une liste de cases à cocher:

checkboxes = [
{
id: "cb1",
name: "Special (not combinable)",
value: false
},
{
id: "cb2",
name: "Example"
value: true
},
{
id: "cb3",
name: "Another one"
value: false
},
{
id: "cb4",
name: "Toggle 1"
value: false
},
{
id: "cb5",
name: "Toggle 2"
value: false
}
]

Dans le modèle, vous pouvez ensuite parcourir la liste suivante:

<div *ngFor="let cb of checkboxes">
<input
type="checkbox"
[checked]="cb.value"
(change)="onCheck(cb)"
/>
<span [innerHtml]="cb.name"></span>
</div>

L'ensemble de la logique de contrôle / décochage peut être contenu dans une méthode onCheck:

onCheck(selected) {

let id = selected.id;
let newValue = !selected.value;

switch(id) {
case "cb1":
if (newValue) {
this.checkboxes = this.checkboxes.map(cb => {
if (cb.id === id) {
// set new value
cb.value = newValue
} else {
if (newValue) {
// uncheck checkbox 1-4 if checkbox 1 is checked
cb.value = false;
}
}
return cb;
})
}
break;

case "cb2":
case "cb3":
case "cb4":
case "cb5":
this.checkboxes = this.checkboxes.map(cb => {
// uncheck checkbox 1
if (newValue && cb.id === "cb1") {
cb.value = false;
}

// set new value
if(cb.id === id) {
cb.value = newValue;
}

// toggle checkbox 4 / checkbox 5
if (["cb4", "cb5"].indexOf(id) > -1 && ["cb4", "cb5"].indexOf(cb.id) > -1 && cb.id !== id) {
cb.value = !newValue;
}

return cb;
})
break;
}

}

J'espère que cela aide à résoudre votre problème. Un exemple de travail complet est ici