How to bind data in input with controller using ng-model?

Question

I'm learning Angular I made this and it works fine, it's simple:

<span>Your Name:</span><h1>{{Name.first+' '+Name.second}}</h1>

<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {
        $scope.Name = { first: 'First', second: 'Second' };
    })
</script>

But I want the controller to read the values from the text inputs, so I made this:

    <p>First Name: <input type="text" ng-model="fName" /></p>
    <p>Last Name: <input type="text" ng-model="lName" /></p>
    <span>Your Name:</span><h1>{{Name.first+' '+Name.second}}</h1>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function ($scope) {
            $scope.Name = { first: $scope.fName, second: $scope.sName };
        });
    </script>

But it doesn't work, I'm beginner enough to be sure that I made it wrong

for primitive types like strings, b=1, a = b, b = 2, results in a == 1. — Petr Averyanov
– Petr Averyanov, Commented Dec 22, 2016 at 12:08

J-Mean · Accepted Answer · 2016-12-22 12:15:28Z

1

You have to use some event to update your $scope.Name object As you are displaying $scope.name as output.

Currently I have used ng-change you may also use ng-click,etc. as per requirement

var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {        
      
      $scope.getName=function(){
        $scope.Name = { first: $scope.fName, second: $scope.lName };
      }
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <p>First Name: <input type="text" ng-change="getName()" ng-model="fName" /></p>
    <p>Last Name: <input type="text" ng-change="getName()" ng-model="lName" /></p>
    
    <span>Your Name:</span><h1>{{Name.first+ " " +Name.second}}</h1>
  </div>

answered Dec 22, 2016 at 12:15

J-Mean

1,2101 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

salix · Accepted Answer · 2016-12-22 12:06:25Z

1

It shoul be lName, not sName:

$scope.Name = { first: $scope.fName, second: $scope.lName };

answered Dec 22, 2016 at 12:06

salix

8516 silver badges13 bronze badges

Comments

Karthik VU · Accepted Answer · 2016-12-22 12:07:15Z

1

This should help :

<p>First Name: <input type="text" ng-model="Name.first" /></p>
<p>Last Name: <input type="text" ng-model="Name.second" /></p>
<span>Your Name:</span><h1>{{Name.first+' '+Name.second}}</h1>

<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {
       console.log("Loaded");
    })
</script>

answered Dec 22, 2016 at 12:07

Karthik VU

5615 silver badges18 bronze badges

1 Comment

mshwf Over a year ago

The point is I want to use the controller to be a mediator between the text inputs and the Full name field

Xyloto · Accepted Answer · 2022-04-11 22:49:45Z

Just create object and bind it properties in html via ng-model.

var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {        
        $scope.person = 
        { 
            firstName: 'Jack', 
            secondName: 'Jack' 
        };
    });

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
        <script src="myApp.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myController">
            <p>First Name: <input type="text" ng-model="person.firstName" /></p>
            <p>Last Name: <input type="text" ng-model="person.secondName" /></p>
            
            <span>Your Name:</span><h1>{{person.firstName + " " + person.secondName}}</h1>
        </div>
    </body>
</html>

dhana lakshmi · Accepted Answer · 2016-12-22 12:41:39Z

-1

your ng-model value should be something like this

<p>First Name: <input type="text" ng-model="Name.fName" /></p>
<p>Last Name: <input type="text" ng-model="Name.lName" /></p>

so that object hireachy is maintained two binding will work

answered Dec 22, 2016 at 12:41

dhana lakshmi

9672 gold badges14 silver badges31 bronze badges

1 Comment

mshwf Over a year ago

Could you post the full working code in code snippet, please?

Collectives™ on Stack Overflow

How to bind data in input with controller using ng-model?

5 Answers 5

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related