Come posso ottenere il valore del pulsante di opzione selezionato quando si invia un modulo utilizzando angularjs?

Question

Ho alcune forme. Ogni modulo ha alcuni pulsanti di opzione possibili e un pulsante di invio. È possibile controllare solo un pulsante di opzione (utilizzando lo stesso attributo del nome per ciascuna radio). Come posso ottenere il valore del pulsante radio selezionato quando il modulo viene inviato, usando angularjs? @blesh consiglia di utilizzare lo stesso modello -g per ogni input, ma si noti che il problema è che i tag di input sono generati usando ng-repeat, ed è qui che inizia il problema. Naturalmente ho bisogno, naturalmente, di un solo pulsante per un mucchio di input. È ben descritto nel seguente plunker, dopo aver giocato con la risposta di @blesh: http://plnkr.co/edit/5KTQRGdPv3dbP462vq1a?p=preview In esso, è possibile vedere che l'avviso mostra il valore iniziale e non l'input selezionato corrente.

Answer 1

Il valore del pulsante di opzione sarà disponibile su qualsiasi proprietà di ambito a cui è stato assegnato ng-model = "" sull'elemento di input. Provare qualcosa di simile:

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> 

E, in modo da poter vedere che funziona, here is a plunker demonstrating the example

Answer 2

Basta aggiungere $parent in 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> 

Answer 3

combinazione con ng valore

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

Ho affrontato questo problema e trovato una soluzione molto semplice e pulito. Ecco cosa dovresti fare.

Nel controller, creare un oggetto vuoto con qualsiasi nome ("valore radio" in questo caso).

Nel file HTML, utilizzare lo stesso 'modello-ng' per ciascun pulsante di opzione/input con lo stesso nome di attributo 'nome' dell'oggetto che unisce ciascun pulsante di opzione (che dovrebbe essere uguale per ogni pulsante) separato da un punto (.) come mostrato nello snippet di codice.

Il controller

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

il file 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 

L'uscita si dovrebbe aspettare

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