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

我有一些表格。每个表单都有几个可能的单选按钮和一个提交按钮。只能选中一个单选按钮（每个单选按钮使用相同的名称属性）。提交表单时，如何使用angularjs获取选中单选按钮的值@blesh建议对每个输入使用相同的ng模型，但请注意，问题在于输入标记是使用ng repeat生成的，这就是问题的开始。当然，我只需要一个按钮就可以输入一组信息。在玩了@blesh的答案后，在下面的plunker中有很好的描述：在其中，您可以看到警报显示的是初始值，而不是当前选择的输入。

您的单选按钮的值将在您在输入元素上为ng model=“”指定的任何范围属性上可用。试着这样做：

JS

app.controller（'MyCtrl'，函数（$scope）{
$scope.submitForm=函数（）{
警报（$scope.radioValue）：
};
$scope.radioValue=1；
});

HTML

一个
两个
三
当前选定：{{radioValue}}
提交

---

而且，您可以看到它正在工作，

只需在

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>

{{i}
当前选定：{{radioValue}}
提交

与ng值的组合

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>

app.controller（'MyCtrl'，函数（$scope）{
$scope.submitForm=function（）{
*****
};
$scope.radioBtn={
名称：“radioButton”
};
$scope.radioValueOne={“id”：“1”，“value”：“随便你要什么”}；
$scope.radioValueTwo={“id”：“2”，“value”：“随便你要什么”}；
$scope.radioValueThree={“id”：“3”，“value”：“随便你要什么”}；
});
一个
两个
三
当前选定：{{radioBtn.name}
提交

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

在控制器中，使用任何名称创建一个空对象（本例中为“radioValue”）

在HTML文件中，对每个单选按钮/输入使用相同的“ng模型”，其名称与加入每个单选按钮的“名称”属性的对象的名称相同（对于每个按钮也应该相同），并用句点（.）分隔，如代码段中所示

控制器

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

---

这就是我所想的，但是值没有改变，并且保持初始化状态。我做错了什么@bleshWell，ng型号、名称和值属性是每个无线电输入所必需的。确保那些在那里。另外，请确保您的输入位于带有正确ng控制器引用的标记内。我一直在玩它，似乎无法找到问题所在。当我将{radioValue}}添加到html中时，我会看到正确的当前值，但是当我提交表单时，警报会显示初始化的值@blesh当我将{radioValue}}与radio输入标记一起添加到ng repeat中时，当前值仅在同一个条目上更改，其他条目保持初始值不变，这表明$scope.radioValue“从javascript文件的角度”没有更改@Bleshaft在花了一些时间阅读之后，我使用了ng model=“$parent.radioValue”，因为ng repeat创建了一个内部范围。好了，谢谢你，伙计$父级允许您超出“ng repeat”绑定，然后您可以访问$scope变量值。令人惊叹的。

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