使用angularjs提交表单时如何获取选中的单选按钮的值？答案

【问题标题】：How can I get the value of the checked radio button when submitting a form using angularjs?使用angularjs提交表单时如何获取选中的单选按钮的值？
【发布时间】：2013-02-16 10:59:45
【问题描述】：

我有几个表格。每个表单都有几个可能的单选按钮和一个提交按钮。只能选中一个单选按钮（对每个单选使用相同的名称属性）。提交表单时，如何使用 angularjs 获取选中的单选按钮的值？ @blesh 建议对每个输入使用相同的 ng-model，但请注意，问题是输入标签是使用 ng-repeat 生成的，这就是问题的开始。当然，我当然只需要一个按钮来输入一堆输入。在玩了@blesh 的答案后，在下面的plunker 中有很好的描述：http://plnkr.co/edit/5KTQRGdPv3dbP462vq1a?p=preview 在其中，您可以看到警报显示的是初始值，而不是当前选择的输入。

【问题讨论】：

标签： angularjs

【解决方案1】：

您的单选按钮的值将在您在输入元素上分配 ng-model="" 的任何范围属性上可用。试试这样的：

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>

而且，你可以看到它在工作，here is a plunker demonstrating the example

【讨论】：

这就是我的想法，但值不会改变并保持初始化状态。我究竟做错了什么？ @blesh
嗯，每个无线电输入都需要 ng-model、name 和 value 属性。确保那些在那里。还要确保您的输入位于具有正确 ng-controller 引用的标签内。
我一直在玩它，但似乎找不到问题所在。当我将 {{radioValue}} 添加到 html 时，我看到了正确的当前值，但是当我提交表单时，警报会显示初始化的值。 @blesh
当我将 {{radioValue}} 添加到 ng-repeat 时，与 radio 输入标签一起，当前值仅在同一条目处更改，其他保持初始值，表明$scope.radioValue 不会从 javascript 文件的“眼睛”中改变。 @blesh
花了一些时间阅读之后，我使用了 ng-model="$parent.radioValue"，因为 ng-repeat 创建了一个内部范围。现在可以了。

【解决方案2】：

只需在ng-model 中添加$parent。

<form name="myForm" ng-submit="submitForm()">
       <label data-ng-repeat="i in [1,2,3]"><input type="radio" name="test" ng-model="$parent.radioValue" value="{{i}}"/>{{i}}</label>
       <div>currently selected: {{radioValue}}</div>
       <button type="submit">Submit</button>
    </form>

【讨论】：

谢谢哥们！ $parent 让您摆脱“ng-repeat”的限制，然后您可以访问 $scope 变量值。太棒了。

【解决方案3】：

结合ng-value

app.controller('MyCtrl', function($scope){ 
   $scope.submitForm = function() {
      *****
   };
   $scope.radioBtn = {
    name: 'radioButton'
   };

   $scope.radioValueOne = {"id": "1", "value": "whatever you want"};
   $scope.radioValueTwo = {"id": "2", "value": "whatever you want"};
   $scope.radioValueThree = {"id": "3", "value": "whatever you want"};
});

<form name="myForm" ng-controller="MyCtrl" ng-submit="submitForm()">
   <label><input type="radio" name="test" ng-model="radioBtn.name" ng-value="radioValueOne"/> One</label>
   <label><input type="radio" name="test" ng-model="radioBtn.name" ng-value="radioValueTwo"/> Two</label>
   <label><input type="radio" name="test" ng-model="radioBtn.name" ng-value="radioValueThree"/> Three</label>
   <div>currently selected: {{radioBtn.name}}</div>
   <button type="submit">Submit</button>
</form>

【讨论】：

【解决方案4】：

我遇到了这个问题，并找到了一个非常简单和干净的解决方案。这是你应该做的。

在您的控制器中，创建一个任意名称的空对象（在本例中为“radioValue”）。

在您的 HTML 文件中，为每个单选按钮/输入使用相同的“ng-model”，其名称与对象加入每个单选按钮的“名称”属性（每个按钮也应该相同）的名称相同，由period(.) 如代码 sn-p 所示。

控制者

var radioValue={};
...
...
console.log($scope.radiovalue) //use JSON.strinigify if naccessary

HTML 文件

    <input type="radio" name="somename" ng-model="radioValue.somename" value="1"/>
    <input type="radio" name="somename" ng-model="radioValue.somename" value="2"/>
    <input type="radio" name="somename" ng-model="radioValue.somename" value="3"/>
//Don't forget to mention value attribute. ng-model does the work by identifying the radio-buttons/inputs by value attribute

你应该期待的输出

{"somename":"1"} //if radio-button with value "1" is selected.

【讨论】：