Aktualisierung Div mit AngularJS

Question

Ich habe ein DIV wie folgt definiert:

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

Grundsätzlich I (Ein-/Ausblenden) bin Wechsel ein Symbol auf dem Nachrichtenstatus abhängig (empfangen, gesendet, lesen). Wenn ich jedoch den Status der Nachricht aktualisiere, ändern sich die Symbole nicht, obwohl ich sie an ng-model gebunden habe. Ich muss die ganze Seite aktualisieren, um die Symbole aktualisiert zu bekommen.

Irgendwie kann ich dieses Update durch Angular tun?

Vielen Dank.

Answer 1

1. ng-Show muss nicht interpoliert werden, können Sie einfach schreiben "message.recieved ..."

2. warum nicht ng-Klasse wie folgt verwenden:

   div ng -Klasse = "{ 'bg-grün': ​​message.recieved 'bg-Bernstein': meessage.recieved}"

nicht div binden zu-Modell-ng, es macht keine Sinn, die 2-Wege-Datenbindung zu verwenden, wenn es keine Eingabe ist und die Ansicht nicht aktualisiert werden kann Das Modell

Answer 2

Es scheint, als ob Sie alle drei div Elemente an ng-Modell binden, wenn sie nicht sein müssen. ng-model sollte nur an Eingabe, select, textarea oder eine andere benutzerdefinierte Eingabe gebunden sein. Siehe https://docs.angularjs.org/api/ng/directive/ngModel

Die Verwendung von ng-Klasse sollte dieses Problem ohne die Notwendigkeit für 3 separate divs lösen. Es ermöglicht Ihnen, die Klasse basierend auf verschiedenen Ausdrücken dynamisch zu ändern. https://docs.angularjs.org/api/ng/directive/ngClass

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