javascript - how to get radio input value using Ionic and AngularJS? - Stack Overflow

admin管理员组

文章数量:1399172

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 es 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=".0.0-beta.6/css/ionic.css" rel="stylesheet"/>
<script src=".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>

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 es 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./1.0.0-beta.6/css/ionic.css" rel="stylesheet"/>
<script src="http://code.ionicframework./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>

• javascript
• angularjs
• forms
• radio-button
• ionic-framework

Share Improve this question Follow asked Sep 20, 2014 at 21:39 PatrioticcowPatrioticcow 27.1k7676 gold badges221221 silver badges340340 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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./1.0.0-beta.6/css/ionic.css" rel="stylesheet"/>
<script src="http://code.ionicframework./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>

本文标签： javascripthow to get radio input value using Ionic and AngularJSStack Overflow