當窗體中的值設置爲true時，顯示一個複選框按鈕選項

我有一組窗體，它有一組複選框，它們被設置爲按鈕樣式，因此不會在單擊時保持選中狀態。當窗體中的值設置爲true時，顯示一個複選框按鈕選項

我使用Angular模板驅動方法來形成和使用一個*ngFor循環來設置可以檢查的工作日的數量（如果不清楚，可以同時檢查多個複選框）。

我的代碼如下所示：

<div class="btn-group btn-group-justified" data-toggle="buttons" role="group"> 
    <label class="btn btn-primary" *ngFor="let wday of wdays" [class.active]="f.value.wday"> 
    <input type="checkbox" [name]="wday" [id]="wday" ngModel [value]="wday">{{ wday }} 
    </label> 
</div>

的形式開始是這樣的：<form (ngSubmit)="onSubmit(f)" #f="ngForm">，從而f.wday回報true（如點擊），false如果（這是未經檢查被點擊至少一次之後）或"" （啓動後）在控制檯中。

我有點困惑，爲什麼按鈕不是視覺上顯示爲活動。

來源

2017-08-04 Spurious

你有一個錯字，而不是（？）：

[class.active]="f.value.wday"

它需要

[class.active]="f.value[wday]"

，這樣它實際上將指向您的表單控件。由於您現在擁有它，它指向一個不存在的名爲wday的窗體控件。

DEMO：http://plnkr.co/edit/SSeqPHFyCQ1JUTLtGouv?p=preview

來源

2017-08-04 13:25:03 Alex

完美，非常感謝。這工作！ – Spurious

非常歡迎您，很高興聽到它的工作！ :) – Alex

你也可能想看看[名] =「wday」如果所有投入都將他們全部有「讓wdays的wday」最後一次迭代的狀態相同的id

我有

let wday of wdays; let i = index 

[name]="'wday' + i"

你可能不想編號爲在所有輸入的相同之前做到這一點。

也是什麼格式是星期六它只是真的假，或者它是一個對象？我想這是這樣的事情，並會解釋其他問題

{ Name: "monday", value: "true" }

來源

2017-08-04 13:39:53

問題不在於html標籤的名稱。迭代遍歷每個鍵/索引具有名稱值的數組將會很奇怪。 – Spurious

當窗體中的值設置爲true時，顯示一個複選框按鈕選項

回答

相關問題