how to get radio input value using Ionic and AngularJS?

Question

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>

PSL · Accepted Answer · 2014-09-20 21:58:06Z

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>

Collectives™ on Stack Overflow

how to get radio input value using Ionic and AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related