javascript - 如何更改 Ionic 框架中 AngularJS ng-repeat 对象内的特定样式

Question

我正在开发一个 Ionic 元素，并且有一个 ng-repeat 指令列出 DOM 内的所有消息对象:

<div ng-repeat="messages in allMessages" class="single-ng-repeat">
   <div class="bubble" 
        ng-init="messages.isgray = false" 
        ng-class="{'bg-gray' : item.isgray}"
        on-hold="item.isgray =!item.isgray; onholdSelectMessages(item.isgray, messages);"
        ng-class="'messageClass-' + message.id">
        <img class="bubble-image" ng-src="{{messages.message}}" ng-click="openImage(messages.message);" />
   </div>
</div>

所以到目前为止我所做的是，当用户 Ionic on-hold 事件时，样式 bg-gray 被添加到对象中被触发。

效果很好。当用户将手指放在对象上一秒钟时，它将其背景颜色更改为灰色，当用户再次执行此操作时，它将其背景颜色更改为默认白色。所以，重点是，当消息的背景设置为灰色时，该消息就会被选中。

例如，现在某个用户在该列表中有 20 条消息。我想创建一个功能，以便他可以选择这 20 条消息中的 5 条并将其保存在 Angular 服务中。因此，用户应该能够选择(保留)第一条消息和第五条消息，并且也应该选择其间的所有消息。因此，消息 2,3 和 4 也应该自动具有灰色背景颜色。

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

我实际上已经弄清楚了，感谢这里的这篇文章: How to set the id attribute of a HTML element dynamically with angular js?

我动态地将 html id 设置为 ng-repeat 内的所有对象:

<div id="{{ 'object-' + $index }}"></div>

之后，我只是将 Controller 内的样式应用到对象 ID，例如“对象 19”。

  var my = document.getElementById('object-19');
  my.classList.add("bg-gray");