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