angular two way dymanic binding issue

Question

Im trying to output the following info and have it update realtime using angulars automatic binding. the first and last update ok, but full isnt updating as I would expect. im grateful for any assistance.

http://jsfiddle.net/laurencefass/74u313gx/1/ required output:

first = john
last = doe
full name=john doe.

HTML

<div ng-app="nameApp">
  <div ng-controller="nameController">
    <input ng-model="first"/>
    <p>first = {{first}}</p>
    <input ng-model="last"/>
    <p>last = {{last}}</p>
    <p>full name = {{full}}</p>
 </div>

JS

var app=angular.module("nameApp", []);

app.controller('nameController', function($scope) {
  $scope.first="john";
  $scope.last="doe";
  $scope.full = $scope.first + " " + $scope.last;
});

initial output seems correct and the first and last update as expected. but the full name is not updating despite being a $scope var and a product of first and last.

you have misunderstood with this full name is binded once you will have keep watch to update full name. — ngLover
– ngLover, Commented Oct 29, 2015 at 12:13
controller only runs once per instance. full won't ever change in your code as is — charlietfl
– charlietfl, Commented Oct 29, 2015 at 12:26

Deblaton Jean-Philippe · Accepted Answer · 2015-10-29 12:23:34Z

3

The following line is only run once. So it is initiated with the first value that has been assigned to first and last.

$scope.full = $scope.first + " " + $scope.last;

So, if you want your binding to work, without having a unnecessary fonction into your controller. (keep your controllers as clean as possible!)

<div ng-app="nameApp">
  <div ng-controller="nameController">
    <input ng-model="first"/>
     <p>first = {{first}}</p>
     <input ng-model="last"/>
     <p>last = {{last}}</p>
    <p>full name = {{first + ' ' + last}}</p>
  </div>
</div>

Have a look at your fiddle :

http://jsfiddle.net/74u313gx/2/

If you really need to have the fullname into the controller, you can use a $watch therefor :

$scope.$watch('first', updateFull);
$scope.$watch('last', updateFull);
function updateFull(){
    $scope.full = $scope.first + " " + $scope.last;
}

If you are concerned by performance, you may want to avoid defining to much watches, then a ng-change can be used :

controller :

$scope.updateFull = function(){
    $scope.full = $scope.first + " " + $scope.last;
}

View :

<div ng-app="nameApp">
  <div ng-controller="nameController">
    <input ng-model="first" ng-change="updateFull();"/>
    <p>first = {{first}}</p>
    <input ng-model="last" ng-change="updateFull();"/>
    <p>last = {{last}}</p>
    <p>full name = {{full}}</p>
 </div>

edited Oct 29, 2015 at 12:23

answered Oct 29, 2015 at 12:16

Deblaton Jean-Philippe

11.4k4 gold badges53 silver badges68 bronze badges

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

1 Comment

Amicable Over a year ago

Deblaton beat me to the punch on advising not you use $watch so I'd just like to suggest this article as some further reading to explain in detail why not benlesh.com/2013/10/title.html

Omri Aharon · Accepted Answer · 2015-10-29 12:14:21Z

3

Since you're defining a string on $scope that is concatenated with several parameters, it won't change automatically when you change the parts that you used to assemble it with.

If you want to achieve what you're looking for, you can do one of two things:

One:

<p>full name = {{first + ' ' + last}}</p>

Two:

<p>full name = {{getFullName()}}</p>

And in the controller have a function:

$scope.getFullName = function () {
    return $scope.first + ' ' + $scope.last;
}

answered Oct 29, 2015 at 12:14

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

2 Comments

Laurence Fass Over a year ago

ok the One seems really obvious i wish i had seen that but i guess Two helps me understand how angular is working. many thanks.

Omri Aharon Over a year ago

@LaurenceFass Pleasure :)

ngLover · Accepted Answer · 2015-10-29 12:19:00Z

1

it will not update auto since your are passing a string in full name after concatenation it returns simple string not an angular var, you need to do the following to update value automatically.

 $scope.$watchGroup(["first","last"],function(){
     $scope.full = $scope.first + " " + $scope.last;
  });

answered Oct 29, 2015 at 12:19

ngLover

4,6183 gold badges24 silver badges42 bronze badges

Comments

paramjeet singh · Accepted Answer · 2015-10-29 12:22:05Z

update your code like below:

View Update

<div ng-app="nameApp">
<div ng-controller="nameController">
<input ng-model="first" ng-change="change()"/>
 <p>first = {{first}}</p>
 <input ng-model="last" ng-change="change()" />
 <p>last = {{last}}</p>
<p>full name = {{full}}</p>

Script Update

var app=angular.module("nameApp", []);


app.controller('nameController', function($scope) {
    $scope.first="john";
    $scope.last="doe";
    $scope.full = $scope.first + " " + $scope.last;
    $scope.change= function(){
       $scope.full=$scope.first + " " + $scope.last;
    }
});

As you seen above, I am changed/update view page input elements with ng-change directive and create same scope function to namecontroller w.r.t.nameApp Module. Hope its helps you!!!

Collectives™ on Stack Overflow

angular two way dymanic binding issue

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related