CODEWITHSUNDEEP
javascriptangularjs
nitroman
nitroman

Reputation: 673

Angular binding does not happens

I am new to Angular. I was trying out some demo programs and got a problem.

Here is my HTML code. I am using a controller named domController, and app myDom.

<!DOCTYPE html>
<html>
<head>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src = "dom.js"></script>
    <title>Angular Dom Management</title>
</head>
<body>
    <div ng-app="myDom" ng-controller="domController">
        <input type="textbox" ng-model="first_name"></input>
        <input type="textbox" ng-model="last_name"></input>
        <span>{{myName}}</span>
    </div>

    </div>

</body>
<script type="text/javascript">

</script>

</html>

Here is my controller script written in dom.js file.

var myDom = angular.module('myDom',[]);
    myDom.controller('domController', ['$scope', function($scope){      
        $scope.first_name = "Rock";
        $scope.last_name = "Star";
        $scope.myName = $scope.first_name +" "+$scope.last_name;
    }]);

My problem is when I open this in browser, the binding {{myName}} shows correct value as Rock Star. But when I change the value in the input field, the values does not change.

Upvotes: 3

Views: 77

Answers (4)

MaKCbIMKo
MaKCbIMKo

Reputation: 2820

That's because you did not change your $scope.myName field. It was calculated at start and won't be changed.

Try the following:

<body>
    <div ng-app="myDom" ng-controller="domController">
        <input type="textbox" ng-model="first_name"></input>
        <input type="textbox" ng-model="last_name"></input>
        <span>{{first_name + " " + last_name}}</span>
    </div>
</body>

Upvotes: 0

dfsq
dfsq

Reputation: 193251

The expression in your controller

$scope.myName = $scope.first_name +" "+$scope.last_name;

is not going to update magically when you change $scope.first_name or $scope.last_name later. In fact it has nothing to do with Angular. You either set up wather manually 

$scope.$watchGroup(['first_name', 'last_name'], function() {
  $scope.myName = $scope.first_name +" "+$scope.last_name;
});

But this so-so solution. I would create a getter, no Angular, just pure JS:

Object.defineProperty($scope, 'fullName', {
  get() {
    return $scope.first_name + $scope.last_name;
  }
});

Upvotes: 0

karaxuna
karaxuna

Reputation: 26930

Try this way:

$scope.myName = function () {
    return $scope.first_name +" "+$scope.last_name
};

HTML:

<span>{{myName()}}</span>

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

$scope.myName is the concatenation of your first and last name on load - myName isn't a watched value and won't be updated instantly - you need to add the watch or the ngChange and constantly update.

Solution one: Use the view to concatenate:

<span>{{first_name + " " + last_name}}</span>

Solution two: Add an ngChange

$scope.nameUpdated = function() {
    $scope.myName = $scope.first_name +" "+$scope.last_name;
}

<input type="textbox" ng-change="nameUpdated()" ng-model="first_name"></input>
<input type="textbox" ng-change="nameUpdated()" ng-model="last_name"></input>

Upvotes: 3

Related Questions