[英]Radio, checkbox and Select/option Binding in angular2
Facing some Issue with Radio button ,checkboxes And Select/option Binding in angular2. 面对单选按钮的一些问题,复选框和选择/选项绑定在angular2。
false
value is not even 'selected' although the value in the model gets updated with false as shown in plukr. false
值的单选按钮,尽管模型中的值被更新为假,如plukr所示。 but radio button ramains unSelected why so ? <input type="radio" name="status" (click)="is_active = false"> //not working
<input type="radio" name="status" (click)="is_active = true"> //working
but 但
<input type="radio" name="status" (click)="is_active = 'false'"> // working
<input type="radio" name="status" (click)="is_active = true"> //working
1.1 Secondly how to remove controls (validation) of radio buttons after form submit (radio button getes selected even after form submit, i am using ngModel for form submitting). 1.1其次如何在表单提交后删除单选按钮的控件(验证)(即使在表单提交后选择了单选按钮,我使用ngModel进行表单提交)。
checked
checkbox. checked
复选框。 i dont want to use (click) method to get checked values. <input type='checkbox' value='1' [checked]='is_checked = one'>One
<input type='checkbox' value='2' [checked]='is_checked = two'>Two
<input type='checkbox' value='3' [checked]='is_checked = three'>Three
i want when the checkbox gets checked value of checked checkbox push into array of checked checkbox otherwise it will splice (above code is not working i know). 我希望当复选框被选中时,复选框的值被选中复选框的数据,否则它将拼接(上面的代码不起作用,我知道)。
<input type='checkbox' value='1' [checked]='checked("one")'>One
<input type='checkbox' value='2' [checked]='checked("two")'>Two
<input type='checkbox' value='3' [checked]='checked("three")'>Three
till now i am using this method and in class i am checking value of checkbox using javascript .checked
, if true pushing into array otherwise splicing from array via Index. 到目前为止我正在使用这种方法,在课堂上我正在使用javascript检查复选框的值
.checked
,如果为true则推入数组,否则通过索引从数组拼接。
Plunk of my working area for radio and checkbox http://plnkr.co/edit/OXnj6U3udgkKYRAVCmkp 我的收音机工作区和复选框http://plnkr.co/edit/OXnj6U3udgkKYRAVCmkp
In case of Select/option everything works fine for me. 如果选择/选项一切正常,对我来说。 but i want something like this:
但我想要这样的东西:
Route1: Having Few Select/option on Route1.
Route1:在Route1上选择/选项很少。 User select few option among of them.
用户在其中选择几个选项。
Then User naviagte To another Route using Routing.
然后用户naviagte使用路由到另一个路由。
But i want when User come back to
Route1
page gets refreshed or either all the select/option onRoute1
get unSelected as on first time.但我想,当用户回来
Route1
页面被刷新或要么全部在选择/选项Route1
得到未选择上还是第一次。
As @GünterZöchbauer said in Answer i had try the same but again not successful. 正如@GünterZöchbauer在答案中说的那样,我尝试了同样但又没有成功。 i am trying this code.
我正在尝试这段代码。
export class LsRules implements OnInit, CanReuse {
.....Some Code Here...
routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) {
console.log('routerCanReuse called');
return false;
}
.....Some Code Here...
}
but not even single this console is worked for me. 但是这个控制台甚至没有为我工作。 also what is
ComponentInstruction
here i don't know. 还有什么是
ComponentInstruction
,我不知道。 where i am wrong ? 哪里我错了?
1) 1)
Radio buttons have a few issues. 单选按钮有一些问题。
I got it working like 我得到了它的工作
<input type="radio" [ngModel]="{checked: model.sex == 'male'}" (ngModelChange)="model.sex='male'" name="sex" value="male">Male<br>
<input type="radio" [ngModel]="{checked: model.sex == 'female'}" (ngModelChange)="model.sex='female'" name="sex" value="female">Female
for a similar question How to bind to radio buttons in angular2 beta 6 对于类似的问题如何绑定到angular2 beta 6中的单选按钮
2) You can use the (change)
event instead to get the value 2)您可以使用
(change)
事件来获取值
3) I guess you you get what you want when you implement 3)我猜你在实施时得到了你想要的东西
routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return false; }
See also https://angular.io/docs/ts/latest/api/router/CanReuse-interface.html 另见https://angular.io/docs/ts/latest/api/router/CanReuse-interface.html
I think SO was down for few minutes. 我认为SO已经停止了几分钟。 For checkbox problem you can do it.
对于复选框问题,您可以这样做。
<input type='checkbox' value='1' [(ngModel)]='is_checked_one' (change)="myFun('one')" >One
<input type='checkbox' value='2' [(ngModel)]='is_checked_two' (change)="myFun('two')" >two
export class AppComponent {
is_active:boolean;
is_checked_one:boolean=false;
is_checked_two:boolean=false;
val:Array<any>= [];
constructor() {
console.log('Component called');
}
myFun(selected)
{
console.log(this.is_checked_one + " " + selected);
if('one'===selected)
{
if(this.is_checked_one===false)
{
console.log('one if');
this.val.push('one');
}
else
{
console.log('one else');
let index= this.val.indexOf('one');
console.log(index);
this.val.splice(index,1);
}
}
else
{
if(this.is_checked_two==false)
{
console.log('two if');
this.val.push('two');
}
else
{
console.log('two else');
let index= this.val.indexOf('two');
console.log(index);
this.val.splice(index,1);
}
}
}
}
}
}
PrimeNG radio buttons simplifies this by allowing binding to a model value. PrimeNG单选按钮允许绑定到模型值,从而简化了这一过程。 http://www.primefaces.org/primeng/#/radiobutton
http://www.primefaces.org/primeng/#/radiobutton
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.