我怎样才能提交使用angularjs表单时选中的单选按钮的价值? [英] How can I get the value of the checked radio button when submitting a form using angularjs?

查看:130
本文介绍了我怎样才能提交使用angularjs表单时选中的单选按钮的价值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一些表格。每个表单有几个可能的单选按钮和一个提交按钮。只有一个单选按钮可以(使用对每个无线相同的名称属性)进行检查。我怎样才能得到检查的单选按钮的值在表单提交时,使用angularjs? @blesh宜使用相同的纳克模型为每个输入,但要注意的问题是,输入代码使用纳克重复产生的,这就是问题的开始。我需要的,当然,当然,只有一个按钮一堆投入。它是在下列plunker充分描述,以@blesh的回答播放后:<一href=\"http://plnkr.co/edit/5KTQRGdPv3dbP462vq1a?p=$p$pview\">http://plnkr.co/edit/5KTQRGdPv3dbP462vq1a?p=$p$pview在这里面,你可以看到,该警报显示初始值,而不是当前选定的输入。

I have a few forms. Each form have a few possible radio buttons and a submit button. Only one radio button can be checked (using the same name attribute for each radio). How can I get the checked radio button's value when the form is submitted, using angularjs? @blesh advised to use the same ng-model for each input, but note that the problem is that the input tags are generated using ng-repeat, and this is where the problem starts. I need, of course, naturally, only one button for a bunch of inputs. It is well described in the following plunker, after playing with @blesh 's Answer: http://plnkr.co/edit/5KTQRGdPv3dbP462vq1a?p=preview In it, you can see that the alert shows the initial value and not the current selected input.

推荐答案

您的单选按钮的值将可在任何scope属性您分配NG模型=到输​​入元素上。尝试是这样的:

Your radio button's value will be available on whatever scope property you've assigned ng-model="" to on the input element. Try something like this:

JS

app.controller('MyCtrl', function($scope){ 
   $scope.submitForm = function (){
       alert($scope.radioValue):
   };

   $scope.radioValue = 1;
});

HTML

<form name="myForm" ng-controller="MyCtrl" ng-submit="submitForm()">
   <label><input type="radio" name="test" ng-model="radioValue" value="1"/> One</label>
   <label><input type="radio" name="test" ng-model="radioValue" value="2"/> Two</label>
   <label><input type="radio" name="test" ng-model="radioValue" value="3"/> Three</label>
   <div>currently selected: {{radioValue}}</div>
   <button type="submit">Submit</button>
</form>

和,所以你可以看到它的工作,这里是一个展示plunker

And, so you can see it working, here is a plunker demonstrating the example

这篇关于我怎样才能提交使用angularjs表单时选中的单选按钮的价值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆