如何使用 Ionic 和 AngularJS 获取无线电输入值？答案

【问题标题】：how to get radio input value using Ionic and AngularJS?如何使用 Ionic 和 AngularJS 获取无线电输入值？
【发布时间】：2014-11-15 04:59:19
【问题描述】：

我有几个单选按钮和一个输入的列表，但由于某种原因我无法获得选定的单选值。

这是我的例子，或jsfiddle。如果您查看控制台并提交表单，您可以看到即使您选择单选按钮，响应也未定义，但输入值正常

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>

【问题讨论】：

标签： javascript angularjs forms radio-button ionic-framework

【解决方案1】：

您需要在控制器中预初始化设置，以便在 ng-repeat 时不会在子范围内创建设置，而是从控制器范围继承，也使用 ng-value="test.id" 而不是 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>

【讨论】：