用 AngularJS 更新 Div

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>

基本上我正在根据消息状态（已接收、已发送、已读）更改 (show/hide) 图标。但是，当我更新消息的状态时，图标不会改变，即使我已将其与 ng-model 绑定。我需要刷新整个页面来更新图标。

有什么方法可以通过 Angular 进行此更新？

谢谢。

Answer 1

ng-show不用插值，直接写"message.recieved..."
为什么不这样使用 ng-class：

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

不要将 div 绑定到 ng-model，当它不是输入且视图无法更新模型时，使用 2 种数据绑定没有任何意义

Answer 2

您似乎将所有三个 div 元素绑定到 ng-model，但实际上它们并不需要。 ng-model 应该只绑定到输入、select、textarea 或其他自定义输入。参见 https://docs.angularjs.org/api/ng/directive/ngModel

使用 ng-class 应该可以解决这个问题，而不需要 3 个单独的 div。它将允许您根据不同的表达式动态更改 class。 https://docs.angularjs.org/api/ng/directive/ngClass

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

用 AngularJS 更新 Div

Updating Div with AngularJS

html

css

data-binding

angularjs

angular-ngmodel