Три состояния флажок с угловым 2 - PullRequest
Новая
       7

Три состояния флажок с угловым 2

0 голосов
/ 29 октября 2018

Я хочу сделать поле ввода с тремя состояниями: проверено, не проверено и пересечено (ошибка a.k.a) В настоящее время я смог сделать чек / снять и изменить расчеты соответственно 

 <input type="checkbox" [ngStyle]="{content: expression}" *ngIf="milestone?.description" [checked]="milestone?.status == 'checked'" (change)="checkMilestone(milestone,initiative, $event, '')">

Однако у меня возникают проблемы при добавлении флажка crossed (X). У кого-нибудь есть идеи, как это сделать? Должны ли у меня состояния что-то вроде этого: 

states = [
    { id: 0, status: 'checked'},
    { id: 1, status: 'unchecked'},
    { id: 2, status: 'crossed'}
];

и добавить стили и изменить их соответственно? Я не уверен, как добавить три стиля вместо двух.

1 Ответ

0 голосов
/ 30 октября 2018

Состояние неопределенного флажка может быть установлено с помощью привязки свойства . Вот упрощенная версия вашей разметки с привязкой состояния indeterminate: 

<input type="checkbox" [indeterminate]="milestone?.status === 'crossed'" 
  [ngModel]="milestone?.status === 'checked'" (ngModelChange)="checkMilestone(milestone)">

Метод checkMilestone может выглядеть примерно так: 

checkMilestone(milestone) {
  switch (milestone.status) {
    case "checked": {
      milestone.status = "unchecked";
      break;
    }
    case "unchecked": {
      milestone.status = "crossed";
      break;
    }
    case "crossed": {
      milestone.status = "checked";
      break;
    }
  }
}

См. этот стек для демонстрации.

...