CODEWITHSUNDEEP
htmlangularjs
user1684140
user1684140

Reputation: 534

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

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

Upvotes: 1

Views: 2816

Answers (2)

e_m0ney
e_m0ney

Reputation: 980

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

Upvotes: 0

Ahmed Nasser
Ahmed Nasser

Reputation: 220

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

Upvotes: 1

Related Questions