はAngularJS

Question

Iは次のように定義されたDIVを有すると本部の更新：

<button ng-repeat="message in user.messages"> 

    <div ng-model="message" ng-show="{{message.received && !message.read}}" class="btn bg-green"></div> 
    <div ng-model="message" ng-show="{{message.received && message.read}}" class="btn bg-green" ></div> 
    <div ng-model="message" ng-show="{{!message.received}}" class="btn bg-amber"></div> 

基本的に私は（受信、送信、読み取り）メッセージのステータスに応じてアイコン（表示/非表示）を変更しています。 しかし、メッセージのステータスを更新すると、アイコンはng-modelでバインドされていても変更されません。アイコンを更新するには、ページ全体をリフレッシュする必要があります。

どのようにしてこの更新プログラムをAngularで実行できますか？

ありがとうございます。

Answer 1

1. NG-ショーを補間する必要はありません、あなただけ書くことができます "message.recieved ..."

2. なぜこのようにNG-クラスを使用しない：

   のdiv NG -class = "{ 'BG-グリーン'：message.recieved、 'BG-琥珀は'：！meessage.recieved}"

モデルをngのためにdiv要素を結合しないでください

、それはなりません任意の2方向データバインディングを使用する感覚、入力ではない場合、ビューは更新できませんモデル

Answer 2

3つのdiv要素をng-modelにバインドしている必要はないようです。 ng-modelは、input、select、textarea、または別のカスタム入力にのみバインドする必要があります。 https://docs.angularjs.org/api/ng/directive/ngModel

ng-classを使用すると、3つの別々のdivを必要とせずにこの問題を解決するはずです。異なる式に基づいてクラスを動的に変更することができます。 https://docs.angularjs.org/api/ng/directive/ngClass

<div ng-class="{'bg-green': message.received && !message.read, 'bg-amber': !message.received}"></div>