mercredi 15 août 2018

Angular check all checkboxes (HTML only)

I wanna know if it's possible to handle this scenario on Angular 4+ only using HTML

I have this piece of HTML

   <ul>
    <li>
      <label>
        <input type="checkbox" name="select-all" [(ngModel)]="selectedAll">
        <span>Select all</span>
      </label>
    </li>
    <li *ngFor="let item of items">
      <label>
        <input  name="element" type="checkbox"  [checked]="selectedAll">
        <span></span>
      </label>
    </li>
  </ul>

This is the items object

[
  { value: 0, label: 'Sunday', checked: false },
  { value: 1, label: 'Monday', checked: true },
  { value: 2, label: 'Tuesday', checked: false },
  { value: 3, label: 'Wednesday', checked: false },
  { value: 4, label: 'Thursday', checked: false },
  { value: 5, label: 'Friday', checked: false },
  { value: 6, label: 'Saturday', checked: false },
]

It works fine like that, but let's say I want to include the "checked" property for some "pre-checked" inputs, so I'd add:

[checked]="selectedAll || item.checked

In this point the or condition will always be true, for the value "true" and the check all will fail on that one,

Is it possible?




Aucun commentaire:

Enregistrer un commentaire