how to get radio input value using Ionic and AngularJS?
13,208
You need to pre-initialize settings in your controller so that settings is not created inside the child scope if ng-repeat, instead it is inherited from controller scope, also use ng-value="test.id"
instead of value=interpolation
(value="{{test.id}}"
), it binds the given expression to the value of your radio, so that when the element is selected, the ngModel of that element is set to the bound value.
var SampleApp;
(function (SampleApp) {
var app = angular.module('sampleApp', ['ionic']);
app.controller('MainCtrl', function ($scope) {
$scope.settings = {}; //Initialize model here
$scope.tests = [{
"id": "1"
}, {
"id": "2"
}, {
"id": "3"
}];
$scope.addResource = function () {
console.log($scope.settings);
};
});
})(SampleApp || (SampleApp = {}));
<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet"/>
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
<div>
<div ng-app="sampleApp" ng-controller="MainCtrl">
<ion-content style="display:block">
<form ng-submit="addResource()">
<div class="list list-inset" ng-repeat="test in tests">
<ion-radio ng-model="settings.id" ng-value="test.id">{{test.id}}</ion-radio>
</div>
<br/>
<div class="list" style="margin: 5px 10px;">
<label class="item item-input item-stacked-label"> <span class="input-label">Email</span>
<input type="text" ng-model="settings.email">
</label>
</div>
<button class="button button-positive">Save</button>
</form>
</ion-content>
</div>
</div>
Comments
-
Patrioticcow over 1 year
i have a list of a few radio buttons and a input, and for some reason i can't get the selected radio value.
here is my example, or jsfiddle. If you look in the console and submit the form you can see that even if you select a radio button the response is undefined, but the input value comes in ok
var SampleApp; (function (SampleApp) { var app = angular.module('sampleApp', ['ionic']); app.controller('MainCtrl', function ($scope) { $scope.tests = [{ "id": "1" }, { "id": "2" }, { "id": "3" }]; $scope.addResource = function (settings) { console.log(settings); }; }); })(SampleApp || (SampleApp = {}));
<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet"/> <script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script> <div> <div ng-app="sampleApp" ng-controller="MainCtrl"> <ion-content style="display:block"> <form ng-submit="addResource(settings)"> <div class="list list-inset" ng-repeat="test in tests"> <ion-radio ng-model="settings.id" value="{{test.id}}">{{test.id}}</ion-radio> </div> <br/> <div class="list" style="margin: 5px 10px;"> <label class="item item-input item-stacked-label"> <span class="input-label">Email</span> <input type="text" ng-model="settings.email"> </label> </div> <button class="button button-positive">Save</button> </form> </ion-content> </div> </div>