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 暂停事件时， bg-grey 样式会添加到对象中被触发了。

工作正常。当用户将手指放在对象上一秒钟时，它会将其背景颜色更改为灰色，当他再次执行此操作时，它会将其背景颜色更改为默认白色。因此，重点是，当消息背景设置为灰色时，会选择消息。

现在，例如，用户在该列表中有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>

之后，我只是将控制器内的样式应用于对象id，例如＆＃34;对象-19＆＃34;

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

如何在Ionic Framework中更改AngularJS ng-repeat对象内的特定样式

1 个答案: