ng-model and value combination not working for input text box
Solution 1
This is a good question as it illustrates how incorrect "thinking in Angular" can lead to issues.
With Angular you start with model first. Then the View is bound to the model and reflects it - not the other way around. What I mean by that is that ng-value
would not set the model, although it would alter the view. You (or rather, the controller) is responsible for setting the model.
So, if you need entity.fullCode
to equal the concatenation of entity.name
and entity.code
, then you should set it in the controller.
For example, if you wanted to set it any time entity.name
or entity.code
change, then you could do so with $watch
:
$scope.$watch("entity.name + entity.code", function(newVal){
$scope.entity.fullCode = $scope.entity.name + "+" + $scope.entity.code;
})
Note, though, that since you are binding entity.fullCode
to another input, changing that input would change entity.fullCode
and would not make it equal to the +
of the first two.
Solution 2
<div ng-app>
<div>
<label>Name:</label>
<input type="text" ng-model="entity.name">
<label>Code:</label>
<input type="text" ng-model="entity.code">
<label>Full Code:</label>
<input type="text" ng-model="entity.fullCode" value="{{entity.fullCode=entity.name + ' + ' + entity.code}}">
</div>
</div>
You must assign something to your ng-model attribute, so that it can bind. your code seems to be work. but just display purpose we do this. cheers
Solution 3
$scope.entity = [];
$scope.entity.name = "";
$scope.entity.code = "";
$scope.$watch("entity.name + entity.code", function(newVal){
if($scope.entity.name != "" && $scope.entity.code != ""){
$scope.entity.fullCode = $scope.entity.name + "+" + $scope.entity.code;
}
else {
$scope.entity.fullCode = "";
}
})
Solution 4
You need to use $watch with true
function MyCtrl($scope) {
$scope.entity={name:'',code:'',fullCode:''};
$scope.$watch('entity',function(n,o){
$scope.entity.fullCode = $scope.entity.name + $scope.entity.code;
},true);
}
Fiddle:- http://jsfiddle.net/405qc0xg/
Solution 5
you need to make use of $watch. It keeps watch on mentioned obeject as soon as value of object change the function of $watch will be called and it will refresh $scope for your code your need to write this:
$scope.$watch('entity.name',function(){
$scope.entity.fullCode=$scope.entity.name+' + '+$scope.entity.code;
});
$scope.$watch('entity.code',function(){
$scope.entity.fullCode=$scope.entity.name+' + '+$scope.entity.code;
});
Related videos on Youtube
forgottofly
Passionate front end developer eager to explore the web SOreadytohelp
Updated on September 19, 2022Comments
-
forgottofly over 1 year
I'm having two input text box. I need to combine the values entered in two text boxes and display it in the third. I'm able to display it if I use only the
value
in the third text box.Box 1:
<input type="text" ng-model="entity.name">
Box 2:
<input type="text" ng-model="entity.code">
Box 3:Box1+Box 2
<input type="text" value="{{entity.name+ ' + ' + entity.code}}">
However if I use a model name in the third box, the logic doesn't seem to be working:
<input type="text" value="{{entity.name+ ' + ' + entity.code}}" ng-model="entity.fullCode">
Can anyone suggest a fix ??
-
forgottoflyThanks @Foo.It really helped
-
-
MEAN Developer about 9 yearsCreating a $watch for this is a bit overkill, no? Also, I believe he's trying to end up with something like this as an example: "something + something" -- where the string literally includes the + character.
-
forgottofly about 9 yearsThanks @squiroid .It mean a lot
-
squiroid about 9 yearsGlad to help you out.
-
New Dev about 9 years@MEANDeveloper, fixed the "+"... It's hard to say that this is an overkill as it is not clear what the ultimate goal is. Should it only be changed by the two input boxes? Then
ng-change
on each would be better. Btw, deep watch (as in another answer) is definitely less efficient -
forgottofly about 9 yearsIt indeed works.But how can I set the value to the model.That's the problem?
-
New Dev about 9 years@MANOJ, careful with deep-watch (with
true
). If you have a large or nested object, this would be extremely inefficient. It's often cheaper to shallow-watch an expression:$watch("entity.name + entity.code", ...)
-
RamboNo5 about 9 yearsAh I see what you mean, then you should go with the accepted answer by @new-dev. It watches
entity.name
andentity.code
for changes and explicitly creates/updates a third model value. -
Roi over 8 yearsdownvote for dup code. You can use
$watchGroup
and pass an array with both name & code -
Moses Ndeda almost 6 yearsYou're right. It's easy to fall into this kind of thinking as I did.