CODEWITHSUNDEEP
javascriptangularjsinputangular-ngmodel
forgottofly
forgottofly

Reputation: 2719

ng-model and value combination not working for input text box

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

Upvotes: 5

Views: 16013

Answers (8)

Palani Kumar
Palani Kumar

Reputation: 350

<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

Upvotes: 2

dhaval mashruwala
dhaval mashruwala

Reputation: 164

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;
    });

Upvotes: 1

Rahul
Rahul

Reputation: 211

$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 = "";
    }
})

Upvotes: 1

New Dev
New Dev

Reputation: 49580

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.

Upvotes: 9

RamboNo5
RamboNo5

Reputation: 2060

Your code should actually work. See this JSFiddle for a working demo.

<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" value="{{entity.name + ' + ' + entity.code}}">
  </div>
</div>

Upvotes: 0

Rajeshwar
Rajeshwar

Reputation: 2509

Hope this helps you, please have a look into the plunker

http://plnkr.co/edit/oMUABphr6JcNEhCnCDKq?p=preview

$scope.obj = {first : '',second : ''};

$scope.$watch('obj', function(newval, oldval){
  $scope.obj.third = $scope.obj.first + $scope.obj.second;  
},true)

The above code says, when ever the object 'obj' changes, then the code inside the $watch will execute.

Upvotes: 0

squiroid
squiroid

Reputation: 14017

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/

Upvotes: 1

MEAN Developer
MEAN Developer

Reputation: 277

I assume you're using controllerAs syntax and would suggest you do something like this in your controller:

entity.fullCode = entity.name + ' - ' + entity.code;

Then you can drop the value attribute and simply bind to the element via data-ng-model/ng-model.

Upvotes: 0

Related Questions