Question

我有一些单选按钮和输入的列表，由于某种原因，我无法获得所选的无线电值。

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

＆＃13;

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 = {}));

＆＃13;

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

＆＃13;

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

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

1 个答案: