1

I'm working on an Ionic project and have a ng-repeat directive that lists all messages objects inside the 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>

So what I made until now is that the style bg-gray is added to the object when the user Ionic on-hold event is triggered.

That works fine. When a user holds the finger on the object for one second, it changes its background color to gray, and when he does it again, it changes its background color to default white. So, the point is, that when the background of the message is set to gray, the message is selected.

So now for example, a user has 20 messages in that list. I want to make a functionality, so that he can select 5 of these 20 messages and save it inside an Angular service. So the user should have the ability to select (on-hold) the 1st message and the 5th message, and all the messages in between should be selected, too. So automatically the messages 2,3 and 4 should have a gray background color, too.

Any help would be appreciated.

Thanks.

Armin Durakovic
  • 31
  • 8
  • in your on-hold function you should send the $index, then check which messages have isgray true, and for all items in-between you should set is gray to true and select the messages. there are different solutions for this – MayK Jun 13 '16 at 09:26
  • well, it's not a problem to send the $index, I figured that out. I know which objects are in between, the question is how to get the independent styles of the objects in between and how to change them. – Armin Durakovic Jun 13 '16 at 12:32
  • the style of each item depends on ng-class="{'bg-gray' : item.isgray}", if you change item.isgray for these items the style will change. did you try it ? do you have a problem with ng-class ? – MayK Jun 13 '16 at 13:47
  • But how do I change the class for that item in between ? – Armin Durakovic Jun 13 '16 at 14:11
  • Let's say I pass those variables inside the on-hold function: `$scope.onholdSelectMessages = function(item,message,index){ ... }` I selected (and changed the style of) the item with id 18 or in this case with $index number 8. Also, I selected (and changed the style of) the item with the id 20 or in this case with $index number 10. How do I change the style from my controller for the item in between those two, the one with the id 19 or $index number 9 ? I tried it with ng-class to add a dynamic style name but it gives me an error. – Armin Durakovic Jun 13 '16 at 14:19

1 Answers1

0

I actually figured it out, thanks to this post here: How to set the id attribute of a HTML element dynamically with angular js?

I set the html id dynamically to all my objects inside the ng-repeat:

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

After that, I just applied the style inside the controller to the object id e.g. "object-19".

  var my = document.getElementById('object-19');
  my.classList.add("bg-gray");
Community
  • 1
  • 1
Armin Durakovic
  • 31
  • 8