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

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

angularjs


Solution 1:[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>

Solution 2:[2]

It shoul be lName, not sName:

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

Solution 3:[3]

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>

Solution 4:[4]

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>

Solution 5:[5]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 J-Mean
Solution 2 salix
Solution 3 Karthik VU
Solution 4 Xyloto
Solution 5 dhana lakshmi

Related Questions