anglejsを使用してフォームを送信するときに、チェックされたラジオボタンの値を取得するにはどうすればよいですか？

Question

私はいくつかのフォームを持っています。各フォームには、いくつかのラジオボタンと送信ボタンがあります。 1つのラジオボタンしかチェックできません（ラジオごとに同じ名前属性を使用）。 anglejsを使用して、フォームが送信されたときに、チェックされたラジオボタンの値を取得するにはどうすればよいですか？ @bleshは各入力に同じngモデルを使用することをお勧めしますが、問題は入力タグがng-repeatを使用して生成され、問題が始まるところです。当然のことながら、入力の束のためのボタンは1つのみです。これは、@ bleshの回答で遊んだ後、次のように説明されています。http://plnkr.co/edit/5KTQRGdPv3dbP462vq1a?p=previewアラートには、現在選択されている入力ではなく、初期値が表示されています。

Answer 1

あなたのラジオボタンの値は、入力要素にng-model = ""を割り当てたスコーププロパティで使用できます。このような何か試してみてください：

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> 

をそして、あなたが働いて、それを見ることができるので、here is a plunker demonstrating the example

Answer 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> 

Answer 3

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> 

Answer 4

私はこの問題に直面し、本当にシンプルでクリーンな解決策を見つけました。ここにあなたがすべきことがあります。

コントローラでは、任意の名前（この場合は「radioValue」）の空のオブジェクトを作成します。

あなたのHTMLファイルでは、各ラジオボタン（同じボタンで同じでなければならない）の 'name'属性を結合しているオブジェクトと同じ名前の各ラジオボタン/入力に同じ 'ng-model'コードスニペットに示されているピリオド（。）。

コントローラ

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.