モーダルを開くときに文字カウンタが更新されない

Question

名前を挿入するオプションがあるページがあります。 基本的には、追加ボタンをクリックし、入力を持つモダルを開き、文字カウンタを開き、追加ボタンをクリックして入力を鳴らし、その名前がページに追加されます。あなたは好きなだけ多くのクリエイトをすることができます。

問題は次のとおりです。入力がフォーカスされている場合のみ、モーダルのcharカウンタが更新されます。最初の名前が5文字と言えば、2番目の名前を追加しようとするとモーダルが空になりますが、入力をクリックするまでcharカウンターが80の代わりに75charsを表示し、次に80に戻ります。 また、既存の名前を編集しようとすると、すでに入力に名前があります。次に、入力をクリックすると、カウンタが正しい値に更新されます。

これは、あなたがプレビューを見ることができないとしてもカントー、コードからのサンプルである、それは問題に関連のコードを持っています

https://embed.plnkr.co/rDbeal3nFmeitXQEkP55/

Answer 1

keyUpイベントや変更イベントをリッスンする必要はありません機能UPDATECOUNTのために、あなたがする必要があるすべては、このように、利用NG-モデルである：ここで

<div class="form-group" ng-class="{ 'has-error': revenue.name.$invalid }"> 
    <label>{{ 'revenues.form.name.label'|trans }}</label> 
    <input name="name" type="text" class="form-control" ng-model="model.name" ng-required="true" maxlength="80" placeholder="{{ 'revenues.form.name.placeholder'|trans }}"> 
</div> 

<span>You have {{80 - model.name.length}} characters left.</span> 

はworking plnkrです。

---

UPDATE：

あなたはスパンがcharの数に基づいて色を変更したい場合は、単にNG-クラスを使用します。

<span ng-class="{'red-text': model.name.length >= 70, 'green-text': model.name.length == 10}">You have {{80 - model.name.length}} characters left.</span> 

赤のテキストと緑のテキストをされていますサンプルのCSSクラス：

.red-text{ 
    color:red; 
} 
.green-text{ 
    color:green; 
} 

ここではです3210