使用 AngularJS 更新 div答案

【问题标题】：Updating Div with AngularJS使用 AngularJS 更新 div
【发布时间】：2016-08-18 06:25:49
【问题描述】：

我有一个如下定义的 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 进行此更新吗？

谢谢。

【问题讨论】：

你有更多可以展示的 angularjs 代码吗？

标签： html css angularjs data-binding angular-ngmodel

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

ng-show不需要插值，直接写“message.recieved...”即可
为什么不像这样使用 ng-class：

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

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

【讨论】：

谢谢科比。 ngClass 是要走的路。