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>
Share:
13,208
Patrioticcow
Author by

Patrioticcow

spooky action at a distance

Updated on June 14, 2022

Comments

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