0
我有(n)複選框和我的angular2視圖中的按鈕。當我點擊其中一個函數時會被調用。當我點擊按鈕時,每個複選框都必須取消選中。怎麼做?? (n)可能會動態變化。如何將在組件變量中所做的更改反映到Angular 2中的視圖中?
我有(n)複選框和我的angular2視圖中的按鈕。當我點擊其中一個函數時會被調用。當我點擊按鈕時,每個複選框都必須取消選中。怎麼做?? (n)可能會動態變化。如何將在組件變量中所做的更改反映到Angular 2中的視圖中?
我會給你一個例子從一個表,因爲我不知道你的代碼實際上的樣子,但它應該對你所需要的工作。
您需要爲您的所有複選框定義一些對象。他們可能都有一些共同的特性,如標籤。這裏有一個這樣的對象的示例:
myData = {
content: [
{
some_string: '',
some_number: 0,
type: '',
selected: false
}
]
};
有了這個目標,您可以創建複選框實例和推動每一個到一個數組,其將持有所有複選框對象。
使用上面定義的對象在您的html中創建您的複選框。在你的html中你的複選框調用一個函數。在下面的情況下調用checkToggle()
函數。
<input id='{{row.id}}' class='bx--checkbox bx--checkbox--svg'
type='checkbox' name='checkbox' (change)="checkToggle($event,
row.id)" [checked]="row.selected">
checkToggle()
被定義如下:
//select or deselect this check box
checkToggle(event, nodeId) {
const id = this.findNode(nodeId);
this.myData.content[id].selected = !this.myData[id].selected;
}
您的按鈕應該結束了調用一個函數來檢查所有的箱子
<button (click)="checkToggleAll($event)">Your Button Title</button>
最後,有你checkToggleAll()
功能經過整個數組的複選框並設置它們。這裏有一個例子:
//select or deselect all the check boxes
checkToggleAll(event) {
for (let i = 0; i < this.myData.content.length; i++) {
if (this.controls[this.myData.content[i].type]) {
this.myData.content[i].selected = event.target.checked;
}
}
}
這是不是你可以插入到你的代碼,但它應該給你如何完成你以後的一些想法。
請將代碼添加到您的問題中,以演示您嘗試完成的內容,嘗試的內容以及失敗的位置。 –
有很多代碼,不可能在這裏發佈。請參考圖片。在點擊category1時,所有複選框都必須取消選中 –
給出一些已實施的代碼。 – asmmahmud