Question

编辑：

根据Maher的修改代码，我将尝试再次解释我的问题。在我的HTML页面上，我只有 1表单。在表单中，我想将＃step1 内的所有字段存储到我的帐户对象中。

请检查＆lt;的HTML。 div id =“＃step1 ”＆gt;

姓
姓氏
Streeet
性别

＆lt;＆lt;＆lt; div id =“＃step2 ”＆gt;

姓
姓氏
性别

我想存储到职员对象。

因此，问题是，我从帐户或员工对象中丢失所选性别的值。所有字段都正确绑定到对象并且可以访问。在＃step1 中，性别广播绑定为自我。 account.gender ，并在＃step2 性别广播与自己绑定。 staff.gender 。但如果我试图获得性别的价值，我得到了未定义。如果有超过2个单选按钮，则看起来角度会覆盖性别的值。

一个例子。在我填写表单并点击提交我想要后得到这样的结果：

帐户对象：

名字='哈利'
姓氏='波特'
Street ='HellouStreet'
性别= 1 //男

员工对象：

名字='哈利'
姓氏='波特'
性别= 2 //女性

但我明白了：

帐户对象：

名字='哈利'
姓氏='波特'
Street ='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>

Answer 1

嗨，我希望这就是你想要的＆amp;帮助你弄清楚如何绑定＆amp;在angularjs中转移ng模型。

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

<Component Id="ProductComponent" Directory="InstallFolder" Guid="{MY_GUID}">
    <File Id="ProductComponent" Source="$(var.MyApp.TargetPath)" KeyPath="yes">
        <Shortcut        Id="StartMenuShortcut"
                       Name="MyApp"
                Description="App Description"
                  Advertise="yes"
                  Directory="MenuFolder"
           WorkingDirectory="InstallFolder"
                       Icon="icon.ico" />
    </File>
    <RemoveFolder Id="RemoveMenuFolder" Directory="MenuFolder" On="uninstall" />
</Component>

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

AngularJS绑定不同模型上的2个单选按钮组

1 个答案: