AngularJS, связывающий 2 группы радиокнопок на разных моделях

0

РЕДАКТИРОВАТЬ:

Основываясь на модифицированном коде Махера, я попытаюсь снова объяснить свою проблему. На моей странице HTML у меня есть только 1 форма. Внутри формы я хочу сохранить все поля, которые находятся внутри # step1, в мой объект учетной записи.

Проверьте, пожалуйста, HTML на <div id = " # step1 ">

  • Имя
  • Фамилия
  • Streeet
  • Пол

И поля внутри <div id = " # step2 ">

  • Имя
  • Фамилия
  • Пол

Я хочу сохранить в своем штатном объекте.

Итак, и ПРОБЛЕМА, я теряю ценность выбранного пола из аккаунта или объекта персонала. Все поля привязываются правильно к объектам и доступны. В # step1 гендерное радио привязывается к себе. account.gender и в # step2 гендерное радио привязывается к себе. staff.gender. Но если я попытаюсь получить значение пола в учетной записи, я получил неопределенный характер. Похоже, что угловые переопределяют значение пола, если имеется более двух переключателей.

Пример. После того, как я заполнил форму и нажав на submit, я хочу получить такой результат:

объект учетной записи:

  • Имя = 'Гарри'
  • Фамилия = 'Поттер'
  • Улица = 'HellouStreet'
  • Пол = 1//Мужчина

Персональный объект:

  • Имя = 'Гарри'
  • Фамилия = 'Поттер'
  • Пол = 2//Женский

Но я понимаю:

объект учетной записи:

  • Имя = 'Гарри'
  • Фамилия = 'Поттер'
  • Улица = '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-check" для значения по умолчанию в ваших кодах, верно?
  • 0
    Привет @Махер. Да, я попробовал оба. Ng-проверено = "верно" или проверено = "проверено".
Показать ещё 3 комментария
Теги:
forms

1 ответ

1
Лучший ответ

Привет, я надеюсь, что это то, что вы хотите, и помочь вам понять, как можно связать и перенести ng-модели в angularjs.

Я создаю пример, как вы это делали в своем проекте, вы можете запустить пример, пожалуйста, проверьте консоль браузера на последнем шаге.

 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
    Привет @Махер! Извините, мой пост был действительно сложным, чтобы понять, что я хочу. Пожалуйста, проверьте мой пост снова. Я описал мою проблему на основе вашего кода. Я думаю, что смогу решить мою проблему, если я добавлю для каждого # шага форму вместо того, чтобы добавить все в 1 форму. Большое спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню