CODEWITHSUNDEEP
angularjs
pratik deshai
pratik deshai

Reputation: 3020

Concate a sting in angular will not affect in html

  <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 ?

Upvotes: 0

Views: 173

Answers (3)

Ritesh Kashyap
Ritesh Kashyap

Reputation: 394

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,

Upvotes: 1

user3843934
user3843934

Reputation:

{{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

Upvotes: 1

Manish Kr. Shukla
Manish Kr. Shukla

Reputation: 4477

  1. 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.

  2. 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.

  1. 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?

Upvotes: 1

Related Questions