角2更改選中的單選按鈕動態

EDIT角2更改選中的單選按鈕動態

我想是一個基團，其中選擇單選按鈕選擇另一個單選按鈕單選按鈕; 'CLICKED'（未選中）單選按鈕永遠不會被嘗試選中它（通過點擊它）被選中，其默認行爲是'CLICKED'無線電獲取'SELECTED'。像this Angular 2 demo。

但是這個演示並不完全是我想要的，因爲它延遲了選擇另一個無線電。

Here is the demo with jQuery.這個沒有延遲，點擊一個單選按鈕會從不檢查那個單選按鈕。例如，點擊第二個單選按鈕從不選擇第二個單選按鈕。至選擇第二個單選按鈕，需要點擊第一個單選按鈕。

OLD：我試圖與角2做的是，我有3個無線電元件A，B，和C，和其中2，A和B可以被選擇，並且當第三個，C，被選中它應該選擇B.因此，C永遠不會被視覺上選擇，或者一瞬間。

我無法完成這項工作。所以我認爲重新創建問題更簡單會是一個好主意，所以我試圖解決這個更簡單的問題。我可以這樣做，選擇A選擇B，選擇B選擇C，選擇C選擇A.

A是第一個單選按鈕，B是第二個，C是第三個單選按鈕。

onRadioChange(val) { 
    val = val == 2 ? 0 : ++val; 
    this.radio_val=val; 
}

Here is the plunker demo

然而，正如你可以在演示中看到，它僅適用於第一次點擊。因此，單擊B將選擇C，但單擊B AGAIN將選擇B.

我認爲這是主要問題。

上面的演示使用[（ngModel）]，但是[checked]也是一樣。

Here is the demo with checked

然而，隨着setTimeout和這樣做的[（ngModel）工作

Here is what I want to do but without delays

這事做Angular2的Lifecycle Hooks？

請幫忙。

來源

2017-03-10 user3290525

在您的演示中更改您的問題是A，B嗎？ – Aravind

@Aravind嗨。它們都不是A和B.這是一個新的演示，點擊'A'，第一個單選按鈕，它選擇第二個單選按鈕。選擇第二個單選按鈕選擇第三個按鈕然後選擇第三個按鈕選擇第一個收音機。 – user3290525

所以笏現在正在發生？ – Aravind

我指的是這個角2文檔：Lifecycle Hooks

根據該文件，

角的單向數據流規則禁止更新的觀點已經組成了。組件視圖組合完成後，這兩個鉤子都會觸發。

然後

// Wait a tick because the component's view has already been checked 
this.logger.tick_then(() => this.comment = c);

所以this demo套毫秒參數爲0，但不不能跳過設置的單選按鈕爲選中像this jQuery demo一樣。

來源

2017-03-10 03:02:47 user3290525

我想我很困惑，你的jQuery示例允許已經選擇的單選按鈕保持選中狀態，但是你說單擊的單選按鈕不應該被選中。我的回答是你想要做什麼？ – ChiefTwoPencils

@ChiefTwoPencils我的錯誤是否令人困惑。我將重新修改爲這樣的內容：'在jQuery演示中，單擊第二個單選按鈕將永遠不會選擇第二個單選按鈕。'因此，在我的jQuery示例中，當您選擇第二個單選按鈕時，無論點擊多少次，第三個單選按鈕都保持選中狀態。要選擇第二個單選按鈕，請選擇第一個單選按鈕。但我遇到的問題是，點擊第二個單選按鈕時，它會選擇第三個按鈕。再次單擊第二個單選按鈕時，它會選擇第二個單選按鈕。 – user3290525

我想你可以通過改變它來讓我的工作。我會在兩個未點擊的人之間切換，而你希望它保持一個。如果您遇到問題，我可能會稍後再編輯它。 – ChiefTwoPencils

單擊事件：設置單選按鈕的模型值。更改事件：該更改的呼叫點擊事件事件將重寫模型值。

<input type='radio' name='test' [value]='0' [(ngModel)]='radio_val' (change)='onRadioChange(0) '(click)='onRadioClick(0)'> 
<input type='radio' name='test' [value]='1' [(ngModel)]='radio_val' (change)='onRadioChange(1) (click)='onRadioClick(1)'> 
<input type='radio' name='test' [value]='2' [(ngModel)]='radio_val' (change)='onRadioChange(2) (click)='onRadioClick(2)'>

UPDATE：

在angular2的lifehook，radionbutton的變化事件是點擊事件之後。同樣，對於我們想要的，我們必須使用settimeout讓angular2在變化事件中重新展現變化的視圖。

plunker demo here。

來源

2017-03-10 01:33:02 Pengyy

第一次單擊單選按鈕就可以了，但第二次不會，就像我的演示一樣。 – user3290525

@ user3290525有趣，第二次不工作。第三次它再次運作。我會研究它。 – Pengyy

謝謝！我希望有一個非常簡單的解決方案，例如我使用jQuery提供的工作演示。 – user3290525

我認爲你必須改爲(click)。在(change)無法處理所有情況，因爲單擊所選按鈕時不會發生更改，因此不會發生更改事件。我會使用boolean來控制哪一個是[checked]，並且事實證明它更容易。所以請嘗試，

(click)='onRadioChange(...)'而不是(change)並添加[checked]='checked[...]'與必要的代碼綁定按鈕到checked:boolean[];。

Working Plunkr ：我帶進行更改的自由每次點擊

來源

2017-03-10 03:14:15 ChiefTwoPencils

這應該爲你工作：

onRadioChange(val) { 
    this.radio_val = (this.radio_val+1) %3; 
}

而不是使用change事件，勾入click事件。

Demo

來源

2017-03-10 03:42:52 pixelbits

很確定他們不希望被點擊的那個不被選中。 – ChiefTwoPencils

你能改述一下......這是一個雙重否定的 – pixelbits

哎呀，應該是：很確定他們不希望被點擊的那個被選中。不知道這是他們實際上想要的。 – ChiefTwoPencils

角2更改選中的單選按鈕動態

回答

相關問題