Concate a sting in angular will not affect in html

Question

  <html>
      <head>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
          <script>
              var app = angular.module('myApp', []);
              app.controller('mycont', function($scope) {
              $scope.firstNM = "pratik";
              $scope.lastNM = "Deshai";
              $scope.fullNM = $scope.firstNM + "  " + $scope.lastNM;
              });
          </script>
      </head>
      <title>
          Controller
      </title>
      <body>
          <div ng-app="myApp" ng-controller="mycont">
              First Name:
              <input type="text" ng-model="firstNM">
              <br>Lasr Name:
              <input type="text" ng-model="lastNM">
              <br>
              <br>{{firstNM +" "+lastNM}} 1..............
              <br>{{fullNM}} 2................
              <br>
              <span ng-bind="fullNM"></span> 3...........
          </div>
      </body>
  </html>

I am new to angularJs Please help me in this. What is diff between this 1 & 2 & 3... change in textbox affect in 1 but not in 2 and 3 why so ?

score 1 · Answer 1 · edited May 23 '17 at 12:06

Your first expression is a dynamic expression. It is being evaluated every time the value of firstNM or lastNM changes. Hence, whenever you type something in the first textbox or second textbox, the value is updated.
Your second expression is a value coming from controller, that has been assigned a value. Now you must understand that :

$scope.fullNM = $scope.firstNM + "  " + $scope.lastNM; 

is equivalent to 

$scope.fullNM = value of $scope.firstNM + "  " + value of $scope.lastNM;

This essentially means that the variable fullNM holds the concatenation of the values of the variables firstNM and lastNM. It has no reference to the original variables whatsoever. Hence, once the value is assigned, it remains the same until and unless you change the value of fullNM itself.

The third expression is the ideal way to bind data models to view. Infact, you should actually use whenever you bind static expressions to your input controls. It has the same effect as that of expression 1. However, there are reasons why ng-bind is better than {{}} in angular?

score 1 · Answer 2 · answered Aug 05 '15 at 05:46

1

{{firstNM +" "+lastNM}} directly get data fron textbox but {{fullNM}} not directly get data from textbox.. {{fullNM}} go to controller and find variable $scope.fullNM .. $scope.fullNM already assign value

               $scope.firstNM = "pratik";   
               $scope.lastNM = "Deshai";

above value not change ..it's static then 2 and 3 not change

answered Aug 05 '15 at 05:46

If you need for change value then create a form and submit your form to controller then change variable $scope.fullNM – Aug 05 '15 at 05:52
ng-bind use for only bind value but {{}} use for expression – Aug 05 '15 at 06:02

Ritesh Kashyap · Accepted Answer · 2015-08-05T05:58:23.967

You can use $sope.$watch to watch for any change in model values:

For single model:

$scope.$watch('firstNM', function(newVal) {
    $scope.fullNM = $scope.firstNM +"  "+ $scope.lastNM;
}, true);

For Multiple model:

$scope.$watchGroup(['firstNM', 'lastNM'], function(newValues, oldValues, scope) {
    $scope.fullNM = $scope.firstNM +"  "+ $scope.lastNM;
});

Now Check this piece of code:

<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('mycont',function($scope){
$scope.firstNM="pratik";
$scope.lastNM="Deshai";
$scope.$watchGroup(['firstNM', 'lastNM'], function(newValues, oldValues, scope) {
    $scope.fullNM = $scope.firstNM +"  "+ $scope.lastNM;
});
});
</script>
</head>
<title>
Controller
</title>

<body>
<div ng-app="myApp" ng-controller="mycont">
First Name: <input type="text" ng-model="firstNM"><br>
Lasr Name: <input type="text" ng-model="lastNM"><br>
<br>
{{firstNM +" "+lastNM}} 1..............
<br>
{{fullNM}} 2................
<br>
<span ng-bind="fullNM"></span> 3...........
</div>
</body>
</html>

Thanks,

Concate a sting in angular will not affect in html

3 Answers3