Angular 2.
Идея в данном примере такая: изначально видны все задания (tasks). Нажимая чекбокс, можно отобразить либо только Дневное, либо только Ночное. Это ожидаемый результат.
Пока до ожидаемого результата не дошел, тк надо сперва вынести чекбокс из цикла, чтобы он находился не внутри блока ngFor.
Такой вариант (когда чекбокс находится внутри ngFor) работает:
<div *ngFor="let task of tasks">
<div class="col-md-3">
<label class="btn-custom">
<input type="checkbox" autocomplete="off"
[(ngModel)]="task.taskType" (ngModelChange)="onModelChange(task);">
</label>
<p>{{task.val}}</p>
</div>
</div>
А такой нет:
<label class="btn-custom">
<input type="checkbox" autocomplete="off" [(ngModel)]="task.taskType" (ngModelChange)="onModelChange(task);">
</label>
<div *ngFor="let task of tasks">
<div class="col-md-3">
<p>{{task.val}}</p>
</div>
</div>
Вот весь файл:
@Component({
selector: 'my-app',
template: `
<div *ngFor="let task of tasks">
<div class="col-md-3">
<label class="btn-custom">
<input type="checkbox" autocomplete="off"
[(ngModel)]="task.taskType" (ngModelChange)="onModelChange(task);">
</label>
<p>{{task.val}}</p>
</div>
</div>
<div>selected: {{getCheckedValues() | json}}</div>
`,
})
export class App {
tasks = [
{chkBoxImageUrl: "http://placehold.it/160x100",id: "item-1",val: "1", taskType: true},
{chkBoxImageUrl: "http://placehold.it/160x100", id: "item-2", val: "2", taskType: false},
{chkBoxImageUrl: "http://placehold.it/160x100", id: "item-3", val: "3", taskType: true},
{chkBoxImageUrl: "http://placehold.it/160x100", id: "item-4", val: "4", taskType: false}
];
getCheckedValues() {
//return this.tasks.filter(obj => obj.checked).map(obj => obj.val);
//return this.tasks.filter(obj => obj).map(obj => obj.val);
return this.tasks.filter(obj => obj.taskType).map(obj => obj.val);
}
}
@NgModule({
imports: [ BrowserModule, FormsModule],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
Plunkr.
Средний
