如何將文本從文本輸入綁定到使用angularjs的另一個文本輸入

Question

我正在試圖合併3個輸入文本並將數據綁定到另一個輸入文本。

<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"/> 

這裏需要的第3個輸入與結合

Answer 1

你應該設置文本框的value HTML屬性添加到4個輸入自動。你可以這樣做內聯：

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

或者你可以使用計算屬性。這裏有一個例子：

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

Answer 2

請參閱我的示例答案在這裏：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; 
    }; 
} 

祝格式化的結果。

謝謝， Elliott