CODEWITHSUNDEEP
angularjs
mshwf
mshwf

Reputation: 7449

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

Upvotes: 2

Views: 1039

Answers (5)

Xyloto
Xyloto

Reputation: 365

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>

Upvotes: 0

dhana lakshmi
dhana lakshmi

Reputation: 947

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

Upvotes: -1

J-Mean
J-Mean

Reputation: 1200

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>

Upvotes: 1

Karthik VU
Karthik VU

Reputation: 561

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>

Upvotes: 1

salix
salix

Reputation: 861

It shoul be lName, not sName:

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

Upvotes: 1

Related Questions