AngularJS binding 2 radio button groups on different models

Question

EDIT:

Based of the modified code of Maher, I will try to explain my problem again. On my HTML Page I have just 1 Form. Inside the form I want to store all fields which are inside #step1 into my account object.

Check please the HTML at < div id="#step1" >

Firstname
Lastname
Streeet
Gender

And the fields inside the < div id="#step2" >

Firstname
Lastname
Gender

I want to store to my staff object.

So and the PROBLEM is, I lose the value of the selected gender from account or staff object. All fields are binded correctly to the objects and are accessable. In #step1 the gender radio is binded to self.account.gender and in #step2 the gender radio is binded to self.staff.gender. But If I try to get the value of the gender in account I got undefined. It looks like that angular override the value of gender if there are more than 2 radio buttons.

An Example. After I fill my form and clicking on submit I want to get like this result:

account object:

Firstname = 'Harry'
Lastname = 'Potter'
Street = 'HellouStreet'
Gender = 1 // Male

staff object:

Firstname = 'Harry'
Lastname = 'Potter'
Gender = 2 // Female

But I get:

account object:

Firstname = 'Harry'
Lastname = 'Potter'
Street = 'HellouStreet'
Gender = undefined

How do I bind the radios correctly? I want to get per each step a user with his gender and store that information to other objects. Like here account and staff.

 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>

Hello @Haris, i think you used "ng-checked" for default value in your codes, right? — Maher
– Maher, Commented May 16, 2016 at 5:28
Hi @Maher. Yes I tried both. Ng-checked="true" or checked="checked". — Haris Bjelic
– Haris Bjelic, Commented May 16, 2016 at 9:05
i know why is undefined @Haris, i edit my answer check it again, i think ng-checked not work in your html as Attr, i set gender default values in controller as you see, share your results. — Maher
– Maher, Commented May 16, 2016 at 9:47
@Maher: Thanks men!! I want to send you thousand hearts!!! Now it works fine!! I was thinking it overrides the value because the staff object and account object has the same property, but that makes no sense. Thank you! — Haris Bjelic
– Haris Bjelic, Commented May 16, 2016 at 22:07
you are welcome my friend.. please mark the answer for others. Thanks you. — Maher
– Maher, Commented May 17, 2016 at 5:28

Maher · Accepted Answer · 2016-05-16 09:45:56Z

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>

Hi @Maher! Sorry my post was really complicated to undserstand what I want. Please check my post again. I've described my problem based on your code. I think I can solve my problem if I add for each #step a form instead to add everything on 1 form. Thank you very much!

Collectives™ on Stack Overflow

AngularJS binding 2 radio button groups on different models

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related