javascript 如何使用 Ionic 和 AngularJS 获取无线电输入值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25953559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get radio input value using Ionic and AngularJS?
提问by Patrioticcow
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
这是我的示例，或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>回答by PSL
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.
您需要在您的控制器中预先初始化设置，以便在 ng-repeat 时不会在子作用域内创建设置，而是从控制器作用域继承它，也使用ng-value="test.id"代替value=interpolation( value="{{test.id}}")，它将给定的表达式绑定到您的值radio，以便在选择元素时，将该元素的 ngModel 设置为绑定值。
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>