2016-05-15 65 views
0

编辑:基于马赫的修改后的代码的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>

+0

你好@Haris,我想你用 “NG-选中” 在你的代码默认值,对不对? – Maher

+0

Hi @Maher。是的,我尝试了两种。 Ng-checked =“true”或者checked =“checked”。 –

+0

我知道为什么undefined @Haris,我编辑我的答案再次检查,我认为ng-checked不工作在你的html作为Attr,我设置控制器性别默认值,如你所见,分享你的结果。 – Maher

回答

1

嗨,我希望这是你想要什么&帮助你找出如何能在angularjs绑定&传输NG的模型。

我按照您在项目中所做的那样创建示例,您可以运行该示例,请在最后一步中检查浏览器控制台。

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>

+0

嗨@Maher!对不起,我的帖子真的很复杂,可以隐藏我想要的内容。请再次检查我的帖子。我根据你的代码描述了我的问题。我想我可以解决我的问题,如果我为每个#step添加一个窗体而不是添加1窗体上的所有内容。非常感谢你! –