Aktualizowanie Div za pomocą AngularJS - html, css, angularjs, bindowanie danych, angular-ngmodel

Mam DIV zdefiniowane w następujący sposób:

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

Zasadniczo zmieniam (pokaż / ukryj) ikonęw zależności od statusu wiadomości (odebrane, wysłane, przeczytane). Jednak gdy aktualizuję status wiadomości, ikony się nie zmieniają, mimo że powiązałem ją z ng-modelem. Muszę odświeżyć całą stronę, aby zaktualizować ikony.

W jaki sposób mogę zrobić tę aktualizację za pomocą Angular?

Dziękuję Ci.

Odpowiedzi:

1. ng-show nie musi być interpolowany, możesz po prostu napisać "message.recieved ..."

2. dlaczego nie używać klasy ng w ten sposób:

   div ng-class = "{" bg-green ": message.recieved," bg-bursztyn ":! meessage.recieved}"

Nie łącz div z ng-modelem, nie ma sensu używanie 2-drożnego powiązania danych, gdy nie jest wejściem, a widok nie może aktualizować modelu

Wygląda na to, że wiążą wszystkie trzy elementy div z modelem ng, gdy nie są potrzebne, model ng powinien być powiązany tylko z wejściowym, select, textarea lub innym niestandardowym wejściem. https://docs.angularjs.org/api/ng/directive/ngModel

Używanie klasy ng powinno rozwiązać ten problem bez potrzeby korzystania z 3 oddzielnych elementów div. Pozwoli to dynamicznie zmieniać klasę na podstawie różnych wyrażeń. https://docs.angularjs.org/api/ng/directive/ngClass

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