How can I bind text from text input to another text input using angularjs

Question

I am trying to combine 3 inputs of input text and binding the data to another input text.

<input type="text" class="textbox" name="country" id="loc_country" value="Gershon" ng-model="location.country"/>
<input type="text" class="textbox" name="city" id="loc_city" ng-model="location.city"/>
<input type="text" class="textbox" name="street" id="loc_street" autocomplete="off" ng-model="location.street"/>
<input type="text" class="textbox" name="result" id="result"/>

Here the first 3 inputs need to added to the 4 input automatically with binding

why the third one is an input box? Do you really need two way binding here? — Rebornix
– Rebornix, Commented Jul 10, 2015 at 5:31
Have you try this ng-model="location.address=location.country+' ' +location.city+' '+location.street'' in 4th input ? — Bhavesh Chauhan
– Bhavesh Chauhan, Commented Jul 10, 2015 at 5:43
Rebornix, the fourth input is inside google map input auto complete, so for your question, yes :). — user1684140
– user1684140, Commented Jul 10, 2015 at 6:15

Ahmed Nasser · Accepted Answer · 2015-07-10 05:58:51Z

1

You should set the value HTML attribute of the text box. You can do it inline like so:

<input type="text" class="textbox" name="result" id="result" value="{{location.street + ' ' + location.city + ' ' + location.country}}"/>

Or you can use a computed property. Here is an example:

HTML:

<div ng-app>
  <div ng-controller="SomeCtrl">
      <input ng-model="textProperty"/>
      <input value="{{getCalculatedText()}}"/>             
  </div>
</div>

JS:

function SomeCtrl($scope) {
  $scope.textProperty = "some text";
  $scope.getCalculatedText = function() {
    return $scope.textProperty+ " is now calculated";};
  }

edited Jul 10, 2015 at 5:58

answered Jul 10, 2015 at 5:52

Ahmed Nasser

2201 silver badge9 bronze badges

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

Comments

e_m0ney · Accepted Answer · 2015-07-10 06:07:31Z

0

Please see my example answer here: https://jsfiddle.net/em0ney/bc3chrog/2/

function ExampleController($scope) {
    $scope.location = {country: 'Australia', city: 'Sydney', street: 'Pitt St'};
    $scope.concatLocationComponents = function() {
        return $scope.location.street + ' ' + $scope.location.city + ', ' + $scope.location.country;
    };
}

Good luck with formatting the result.

Thanks, Elliott

answered Jul 10, 2015 at 6:07

e_m0ney

9809 silver badges14 bronze badges

Collectives™ on Stack Overflow

How can I bind text from text input to another text input using angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related