角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更改选中的单选按钮动态

回答

相关问题