编辑:基于马赫的修改后的代码的AngularJS不同车型结合2个单选按钮组
,我会尝试重新解释我的问题。在我的HTML页面上,我只有1表格。里面的表格我想存储#step1中的所有字段到我的帐户对象。
检查,请在HTML在< DIV ID = “#步骤1”>
- 姓
- 姓
- Streeet
- 性别
而且里面的字段< div id =“#step2“>
- 姓
- 姓
- 性别
我想保存我的人员对象。
所以和问题是,我失去了值从帐户或工作人员对象选择性别的。所有字段都正确绑定到对象并且可访问。在#step1性别电台绑定到自我。 account.gender and in #step2性别无线电绑定到自己。 staff.gender。但是,如果我试图通过考虑性别的价值来得到未定义的性别。如果超过2个单选按钮,它看起来像角度覆盖了性别的值。
一个例子。之后我填我的表格,然后点击提交我想得到这样的结果:
帐户对象:
- 名字=“哈利”
- 姓氏=“波特”
- 街= 'HellouStreet'
- 类别= 1 //男
人员对象:
- 名字= '哈利'
- 姓氏= '波特'
- 性别= 2 //女
,但我得到:
帐户object:
- 名字= '哈利'
- 姓氏= '波特'
- 街= 'HellouStreet'
- 性别=未定义
如何正确绑定的电台吗?我希望每一步都有一个用户与他的性别,并将该信息存储到其他对象。像这里的帐户和工作人员。
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>
你好@Haris,我想你用 “NG-选中” 在你的代码默认值,对不对? – Maher
Hi @Maher。是的,我尝试了两种。 Ng-checked =“true”或者checked =“checked”。 –
我知道为什么undefined @Haris,我编辑我的答案再次检查,我认为ng-checked不工作在你的html作为Attr,我设置控制器性别默认值,如你所见,分享你的结果。 – Maher