角度バインド別の値への入力値

Question

私は今日少し脳死しているように感じます。

私は文字列と入力を持っています。入力から文字列の真ん中までの値を引き出す必要があります。しかし、私はあなたが文字列でそれを見ることができる入力に入力するようにバインドされたいと思います。

1つの解決策は、文字列をこぼして、私は何かのようにすることができます。

<p>{{stringStart}} {{country}} {{stringEnd}}</p> 

しかし、私はおそらく文字列はので、このようにそれをspilting、おそらく退屈になり、多くのVARSて引っ張る必要がある状況になります。以下の例を参照してください。

https://jsfiddle.net/bc3chrog/5/

私はこれを行うには、別の簡単な方法は、おそらくそこにあるように感じるが、良い解決策を考え出すことができるように見えることはできません。

編集：申し訳ありませんが、私は新しい文字列をスコープvarに保存する必要があります。いくつかの人々はいくつかの実用的な解決策を作りましたが、テキストを2つの場所に設定することを避けようとしていました。 1つの場所でしか定義されていない場合は、よりクリーンで簡単に更新できます。

Answer 1

あなたのコントローラに連結された文字列が必要な場合は、$watchを設定することができます。

$scope.$watch('country', function(newValue) { 

    $scope.fullCountryString = 'string start ' + newValue + ' string end'; 

}); 

いつでも$scope.countryは、新しい値、$scope.fullCountryStringのために作成される新しい値を取得します。したがって、必要なだけ多くの場所であなたのビューをfullCountryStringにバインドすることができます。

Answer 2

function ExampleController($scope) { 
 
    $scope.countryPlaceholder = 'INPUT TEXT HERE'; 
 
    $scope.countryText = 'I come from ' + $scope.country + '. The best place in the world.' 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
    <form ng-controller="ExampleController"> 
 
     <input type="text" class="textbox" name="country" id="country" ng-model="country" placeholder="{{countryPlaceholder}}" /> 
 
     <p>{{'I come from ' + country + '. The best place in the world.'}}</p> 
 
    </form> 
 
</div>