javascript - AngularJS在不同型号上绑定(bind)2个单选按钮组-6ren

javascript - AngularJS在不同型号上绑定(bind)2个单选按钮组

转载作者：行者123 更新时间：2023-12-03 06:56:57

26

4

编辑:

基于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/

上一篇：javascript - 更新输入文本框的数据值 oninput 不起作用

下一篇：javascript - 如何替换javascript中某些字符之间的文本

26

4

0

文章推荐： javascript - 如何替换javascript中某些字符之间的文本

文章推荐： c++ - 使用变量与使用数字

文章推荐： javascript - 更新输入文本框的数据值 oninput 不起作用

ios - 获取设备类型/型号
在了解如何检测用户设备后:iOS - How to get device make and model? 我制作了一个快速测试应用程序以根据设备显示警报。我没有从这段代码中得到任何警告。我在这里错过了
ruby-on-rails - rails 型号
我有一个名为 test.rb 的模型，当我在 Controller 中使用 @tests=Test.new 时，出现以下错误。有人可以解决这个问题吗？ “Test:Module 的未定义方法‘新’”
php - Codeigniter 2 型号
我必须从不同的网络服务和我自己的数据库中获取数据，并在网站上显示之前组合这些数据。执行此操作的最佳方法是什么？我更喜欢为 Web 服务和数据库编写单独的模型。如何将不同数据源的模型类组织到不同的文件
php - Codeigniter 2 型号
我必须从不同的网络服务和我自己的数据库中获取数据，并在网站上显示之前组合这些数据。执行此操作的最佳方法是什么？我更喜欢为 Web 服务和数据库编写单独的模型。如何将不同数据源的模型类组织到不同的文件
php - 生成有错误的词(汽车品牌/型号)
我正在开发一种模糊搜索机制。我在数据库(mysql)(英文和俄文名称)中有汽车品牌/型号和城市 - 大约 1000 项。用户可以输入错误或翻译中的单词。现在我从 db 中检索所有这些单词，并将循环中的
javascript - 仅通过网页区分 iPhone 型号？
问题我在一家拥有大量现场员工的公司工作，他们都配发了 iPhone。但这些手机的型号各不相同，没有早于 iPhone 4 的。我需要一种快速的方法来确定哪个人拥有哪种型号的 iPhone，因为该数据
iphone - 是否可以获得特定的 iPhone 型号？
这个问题在这里已经有了答案: 关闭 9 年前。 Possible Duplicate: Determine device (iPhone, iPod Touch) with iPhone SDK H
windows - 根据用户模式故障转储找出 CPU 型号
我有我的应用程序的故障转储。我的应用程序失败，因为一些用户说“无效指令”试图执行我在那里的一些 SSSE 指令。在 WinDBG 中，如何找出 CPU 型号，以便找出其指令集，并支持该指令集，或更新
database-design - 在数据库中存储年份/品牌/型号？
这是我的想法(原谅 Django 格式): class VehicleMake(Model): name = CharField(max_length=50) class VehicleMod
ruby-on-rails - Rails 型号 "before_filter"?
我知道 before_filter 仅适用于 Rails 中的 Controller ，但我想要一个模型这样的东西:每当我的模型中的一个方法被调用时，我想运行一个方法来确定被调用的方法是否应该运行。从
ios - 我希望我的应用程序能够识别 iPhone 型号，因为我没有使用自动布局
我按以下方式编写代码 #define isiPhone6 ( [[UIScreen mainScreen] bounds].size.height == 667)?TRUE:FALSE #define
machine-learning - SGD 型号 "overconfidence"
我正在使用 Apache Mahout 解决二进制分类问题。我使用的算法是 OnlineLogisticRegression，我目前拥有的模型强烈倾向于产生 1 或 0 的预测，没有任何中间值。请提
PHP 组数组数据 - 品牌、型号、SKU
我正在使用 mysql 查询返回适合 php 中某些汽车的产品数组，如下所示； array { [0]=> array(3) { ["sku"]=> string(16) "123a "
android - 在 Android 上确定配对蓝牙设备的制造商/型号
有谁知道在 Android 下获取绑定(bind)蓝牙设备的制造商和型号的方法吗？例如，如果我与蓝牙耳机配对，我希望能够确定该耳机的制造商和型号。谢谢! 最佳答案目前在 Android 中没有公共
ruby-on-rails - 拥有并属于许多 3 型号
如果我有 3 个模型要连接怎么办？例如: 用户可以对许多不同的应用程序拥有许多不同的权限。所以我需要一个表来存储: user_id permission_id application_id has
data-modeling - 摩托车数据库(品牌/型号/生产年份)
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
ios - 根据屏幕高度获取 iPhone 型号 XS Max
我正在尝试为 XS Max 定制设计。之前我只是通过检查 main.bound.screen.height 来识别设备，对于 XS Max，根据此网站:https://www.paintcodeapp
javascript - ng-型号 : empty strings should be null
如果我使用 ng-model 作为输入字段并将其清空，则 Angular 将其设置为 '' 而不是 null，即使它之前为 null。这对我来说是一个问题，因为如果输入字段为空，我需要将 null
ios - 有没有办法使用 sysctl 获取 iPhone 型号？
我需要获取型号，例如:对于 iPhone 6，我想要的型号是 N61AP 而不是 iPhone 7,2。我在objective-c中需要这个。我尝试了一些方法，但我得到的只是'iPhone 7,2'
machine-learning - 哪种 GPU 型号/品牌最适合神经网络？
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎不是关于 a specific programming problem, a software

首页

博学

6Ren·AI

商城