Mise à jour de Div avec AngularJS - html, css, angularjs, liaison de données, ngmodèle angulaire

J'ai un DIV défini comme suit:

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

En gros, je change (affiche / cache) une icôneen fonction de l'état du message (reçu, envoyé, lu). Cependant, lorsque je mets à jour le statut du message, les icônes ne changent pas, même si je l’ai lié avec ng-model. Je dois actualiser toute la page pour que les icônes soient mises à jour.

De toute façon, je peux faire cette mise à jour via Angular?

Je vous remercie.

Réponses:

1. ng-show n'a pas besoin d'être interpolé, vous pouvez simplement écrire "message.recieved ..."

2. pourquoi ne pas utiliser ng-class comme ceci:

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

Ne liez pas div à ng-model, cela n’a aucun sens d’utiliser une liaison de données bidirectionnelle, quand ce n’est pas une entrée, et la vue ne peut pas "mettre à jour le modèle

Il semble que vous liez les trois éléments div à ng-model quand ils n’ont pas besoin de l'être. Ng-model ne devrait être lié qu'à input, select, textarea ou à une autre entrée personnalisée. Voir https://docs.angularjs.org/api/ng/directive/ngModel

Utiliser ng-class devrait résoudre ce problème sans avoir besoin de 3 divs séparés. Cela vous permettra de changer dynamiquement la classe en fonction de différentes expressions. https://docs.angularjs.org/api/ng/directive/ngClass

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