Как я могу получить значение проверенного переключателя при отправке формы с помощью angularjs?

У меня есть несколько форм. В каждой форме есть несколько возможных переключателей и кнопка отправки. Можно проверить только один переключатель (с использованием одного и того же имени для каждого радиоприемника). Как я могу получить значение проверенного переключателя при отправке формы, используя angularjs? @blesh рекомендовал использовать одну и ту же ng-модель для каждого входа, но обратите внимание, что проблема заключается в том, что входные теги генерируются с использованием ng-repeat, и в этом проблема начинается. Естественно, мне нужно, конечно, только одна кнопка для множества входов. Это хорошо описано в следующем plunker, после игры с @blesh Ответ: http://plnkr.co/edit/5KTQRGdPv3dbP462vq1a?p=preview В нем вы видите, что предупреждение показывает начальную значение, а не текущий выбранный вход.

Ответ 1

Ваше значение переключателя будет доступно по любому свойству scope, которому вы присвоили 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>

И, чтобы вы могли видеть, что он работает, вот плункер, демонстрирующий пример

Ответ 2

просто добавьте $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>

Ответ 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>

Ответ 4

Я столкнулся с этой проблемой и нашел действительно простое и чистое решение. Вот что вам следует делать.

В вашем контроллере создайте пустой объект с любым именем ( "radioValue" в этом случае).

В вашем HTML файле используйте одну и ту же "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.