AngularJSの{{expression}}の前にテキストを削除するには

Question

私は簡単な考えに悩まされています。ユーザーが入力フィールドをクリックして、入力中のテキストのみを表示するときに、「Hello」を削除するにはどうすればよいですか。

H1タグ内に「Hello」が必要です。ユーザーが入力フィールドをクリックして入力を開始すると消えます。

<div> 
    <label>Name:</label> 
    <input type="text" ng-model="yourName" placeholder="Enter a name here"> 

    <h1>Hello {{yourName}}</h1> 
</div> 

jQueryを使用してH1タグを空にしたりデタッチしようとしましたが、これも式を削除します。

ありがとうございました。

Answer 1

にあなたはバインディング構文の中にそれを行うことができます：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
<div ng-app> 
 
    <label>Name:</label> 
 
    <input type="text" ng-model="yourName" placeholder="Enter a name here"> 
 

 
    <h1>{{yourName || 'Hello'}}</h1> 
 
</div>

Answer 2

helloテキストを1つのスパンに保ち、それにクラスを付けることができます。

<span ng-if="yourName">hell0</span> 

Answer 3

別の変数

<h1>{{ myLabel }}{{yourName}}</h1> 

を使用して、コントローラ

$scope.myLabel = 'Text as you please'; //'' to clear 

Answer 4

あなたspanとして内部Helloラップ：このhttp://codepen.io/Sky-123/pen/jrLBRA

希望：

<div ng-app> 
    <label>Name:</label> 
    <input type="text" ng-model="yourName" placeholder="Enter a name here"> 

    <h1><span id="temp">Hello </span>{{yourName}}</h1> 
</div> 

今、あなたはあなたの機能を動作させるために、このjqueryのを書くことができます添付

$("input").focus(function(){ 
     $("#temp").hide(); 
    }) 

    $("input").blur(function(){ 
     $("#temp").show(); 
    }) 

リンク助けて！