10

私はいくつかのフォームを持っています。各フォームには、いくつかのラジオ ボタンと送信ボタンがあります。チェックできるラジオ ボタンは 1 つだけです (各ラジオに同じ name 属性を使用)。angularjsを使用して、フォームが送信されたときにチェックされたラジオボタンの値を取得するにはどうすればよいですか? @blesh は、各入力に同じ ng-model を使用するようにアドバイスしましたが、問題は入力タグが ng-repeat を使用して生成されることであり、ここから問題が始まることに注意してください。もちろん、当然のことながら、一連の入力に対して必要なボタンは 1 つだけです。@blesh の回答で遊んだ後、次のプランカーでよく説明されています: http://plnkr.co/edit/5KTQRGdPv3dbP462vq1a?p=preview選択した入力。

4

4 に答える 4

20

ラジオ ボタンの値は、input 要素で 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>

そして、それが機能しているのを見ることができるように、ここに例を示すプランカーがあります

于 2013-03-01T20:48:16.157 に答える
18

を追加するだけ$parentですng-model。

<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>
于 2015-01-14T05:46:12.597 に答える
0

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

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

HTML ファイルで、各ラジオ ボタン/入力に同じ「ng-model」を使用し、各ラジオ ボタンの「name」属性を結合するオブジェクトの名前と同じ名前 (これも各ボタンで同じにする必要があります) をピリオド (. ) コード スニペットに示すように。

コントローラー

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.
于 2016-12-26T13:03:44.110 に答える
0

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>
于 2016-04-28T08:57:12.030 に答える