Обновления Div с AngularJS

Question

У меня есть 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. нг-шоу не нужно интерполировать, вы можете просто написать "message.recieved ..."

2. почему бы не использовать нг-класс, как это:

   ДИВ нг -класс = "{ 'BG-зеленый': message.recieved 'BG-янтарный': meessage.recieved}"

не связывайте дел до нг-модель, она не делает никаких смысл использовать двустороннюю привязку данных, когда это не вход, и представление не может обновить модель

Answer 2

Кажется, что вы привязываете все три элемента div к ng-модели, когда им этого не нужно. ng-модель должна быть привязана только к вводу, select, textarea или другому пользовательскому вводу. См. https://docs.angularjs.org/api/ng/directive/ngModel

Использование ng-класса должно решить эту проблему без необходимости использования трех отдельных разделов. Это позволит вам динамически изменять класс на основе разных выражений. https://docs.angularjs.org/api/ng/directive/ngClass

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