编辑:
基于Maher修改后的代码，我将尝试再次解释我的问题。在我的 HTML 页面上，我只有 1 个表单。在表单内，我想将 #step1 内的所有字段存储到我的帐户对象中。
请检查
处的 HTML
- 名字
- 姓氏
- 街道
- 性别
以及 < div id="#step2"> 内的字段
- 名字
- 姓氏
- 性别
我想存储到我的员工对象。
因此，问题是，我丢失了帐户或员工对象中所选性别的值。所有字段都正确绑定(bind)到对象并且可以访问。在#step1中，性别单选绑定(bind)到self.account.gender，在#step2中，性别广播与 self.staff.gender 绑定(bind)。但是，如果我尝试获取帐户中性别的值，我就会得到未定义的结果。如果有超过 2 个单选按钮，看起来 Angular 会覆盖性别的值。
一个例子。填写表格并点击提交后我想要得到这样的结果:
帐户对象:
- 名字=“哈利”
- 姓氏=“波特”
- 街道 = 'HellouStreet'
- 性别 = 1//男
人员对象:
- 名字=“哈利”
- 姓氏=“波特”
- 性别 = 2//女
但我得到:
帐户对象:
- 名字=“哈利”
- 姓氏=“波特”
- 街道 = 'HellouStreet'
- 性别=未定义
如何正确绑定(bind) radio ？我想在每一步中获取用户的性别并将该信息存储到其他对象中。喜欢这里的帐户和工作人员。
var app = angular.module("app", []);
app.controller("WelcomeController", function ($scope, $filter) {
var self = this;
self.account = {};
self.staff = {};
self.bindForm = function() {
self.staff = self.staff;
self.account = self.account;
}
self.saveStep = function () {
console.log("staff", self.staff);
console.log("account", self.account");
}
});<!doctype html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="WelcomeController as self">
<div class="container">
<form name="MyForm" class="col-md-4">
<div id="step1" class="form-group">
<input class="form-control" ng-model="self.account.firstName" placeholder="firstName" ng-required="true" />
<input class="form-control" ng-model="self.account.lastName" placeholder="lastName" ng-required="true" />
<input class="form-control" ng-model="self.account.street" placeholder="streetName" ng-required="true" />
<label class="radio-inline">
<input name="i-account" type="radio" ng-model="self.account.gender" ng-value="1" ng-required="true">
<span class="fa fa-circle"></span> Male
</label>
<label class="radio-inline">
<input name="i-account" type="radio" ng-model="self.account.gender" ng-value="2" ng-required="true">
<span class="fa fa-circle"></span> Female
</label>
</div>
<div id="step2" class="form-group">
<input class="form-control" ng-model="self.staff.firstName" placeholder="firstName" />
<input class="form-control" ng-model="self.staff.lastName" placeholder="lastName" />
<label class="radio-inline">
<input name="i-staff" type="radio" ng-model="self.staff.gender" ng-value="1" ng-required="true">
<span class="fa fa-circle"></span> Male
</label>
<label class="radio-inline">
<input name="i-staff" type="radio" ng-model="self.staff.gender" ng-value="2" ng-required="true">
<span class="fa fa-circle"></span> Female
</label>
</div>
<button class="btn btn-success" ng-click="self.saveStep()">finish</button>
</form>
</div>
</body>
</html>最佳答案
Hi, i hope this is what you want & help you to figure out how can bind & transfer ng-models in the angularjs.
I create example as you did in your project, you can run the example please check browser console in the last step.
var app = angular.module("app", []);
app.controller("WelcomeController", function ($scope, $filter) {
var self = this;
self.account = {gender: 1};
self.staff = { gender: 2};
self.bindForm = function() {
self.staff = self.account;
}
self.saveStep = function () {
console.log("account", self.account.gender);
console.log("staff", self.staff);
}
});<!doctype html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="WelcomeController as self">
<div class="container">
<form name="form" class="col-md-4">
<div class="form-group">
<input class="form-control" ng-model="self.account.firstName" placeholder="firstName" ng-required="true" />
<input class="form-control" ng-model="self.account.lastName" placeholder="lastName" ng-required="true" />
<input class="form-control" ng-model="self.account.street" placeholder="street" ng-required="true" />
<label class="radio-inline">
<input name="i-account" type="radio" ng-model="self.account.gender" ng-value="1" ng-required="true">
<span class="fa fa-circle"></span> Male
</label>
<label class="radio-inline">
<input name="i-account" type="radio" ng-model="self.account.gender" ng-value="2" ng-required="true">
<span class="fa fa-circle"></span> Female
</label>
</div>
<div class="form-group">
<input class="form-control" ng-model="self.staff.firstName" placeholder="firstName" />
<input class="form-control" ng-model="self.staff.lastName" placeholder="lastName" />
<label class="radio-inline">
<input name="i-staff" type="radio" ng-model="self.staff.gender" ng-value="1" ng-required="true">
<span class="fa fa-circle"></span> Male
</label>
<label class="radio-inline">
<input name="i-staff" type="radio" ng-model="self.staff.gender" ng-value="2" ng-checked="true" ng-required="true">
<span class="fa fa-circle"></span> Female
</label>
</div>
<button class="btn btn-primary" ng-click="self.prvStep()">Previous</button>
<button class="btn btn-success" ng-click="self.saveStep()" ng-disabled="formStep2.$invalid">finish</button>
</form>
</div>
</body>
</html>关于javascript - AngularJS在不同型号上绑定(bind)2个单选按钮组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37234292/