What is the best way to apply ng-style to a single element that was generated using $index within an ng-repeat loop

Question

What is the best way to apply ng-style to a single element that was generated using $index within an ng-repeat loop

I am dealing with 2 directives: wa-hotspots and wa-tooltips.
When the ng-mouseover event occurs on wa-hotspots, it takes the $index of wa-hotspot and adjusts the visibility and position of wa-tooltip using ng-class:on and ng-style="tooltipCoords" by matching the indexes.
Note: Since both wa-hotspots and wa-tooltips share the same collection named page.hotspots, they also share the same index through ng-repeat.

The Issue: The problem arises when hovering over wa-hotspots sets the ng-style position for ALL elements in wa-tooltips. I want it to set the style only for the corresponding matching index. Even though visibility is controlled by ng-class, this extra styling seems unnecessary and inefficient.

Hence:

Query: How can I ensure that my ng-style only styles the relevant tooltip that matches the shared index, rather than applying it to all wa-tooltips upon hovering over wa-hotspots?

<ul id="wa-page-{{page.pageindex}}" class="wa-page-inner" ng-mouseleave="pageLeave()">


    <li wa-hotspots 
        <map name="wa-page-hotspot-{{page.pageindex}}">
            <area ng-repeat="hotspot in page.hotspots" 
                  class="page-hotspot" 
                  shape="{{hotspot.areashape}}" 
                  coords="{{hotspot.coordinatetag_scaled}}" 
                  ng-mouseover="showTooltip($index, hotspot.coordinatetag_scaled)" 
                  ng-mouseout="hideTooltip()">
        </map>
    </li>

    <li class="tooltip-wrapper">
        <ul class="tooltip">
            <li wa-tooltips 
                ng-repeat="hotspot in page.hotspots" 
                ng-class="{on: hovered.index == $index}" 
                ng-mouseover="hovered.active == true" 
                ng-mouseout="hovered.active == false" 
                ng-style="tooltipCoords" hotspot="hotspot">
            </li>
        </ul>
    </li>
</ul>

tooltip:

javascript angularjs angularjs-ng-repeat directive ng-style

Answer 1

Answer №1

To customize it for each item, you should use hotspot.tooltipCoords and set the variable by index. The check can be done within the expression function.

Here is a code snippet

<div ng-controller="MyCtrl">
    <div ng-repeat="item in items" ng-style="isChecked($index)">
        name: {{item.name}}, {{item.title}}
        <input type="checkbox" ng-model="item.checked" /> 
   </div>
</div>

...

$scope.isChecked = function($index){
    var color = $scope.items[$index].checked ? 'red' : 'blue';
    return {color:color};
}

Answer 2

To customize it for each item, you should use hotspot.tooltipCoords and set the variable by index. The check can be done within the expression function.

Here is a code snippet

<div ng-controller="MyCtrl">
    <div ng-repeat="item in items" ng-style="isChecked($index)">
        name: {{item.name}}, {{item.title}}
        <input type="checkbox" ng-model="item.checked" /> 
   </div>
</div>

...

$scope.isChecked = function($index){
    var color = $scope.items[$index].checked ? 'red' : 'blue';
    return {color:color};
}

Answer 3

Answer №2

Instead of

ng-mouseover="hovered.active == true" 
ng-mouseout="hovered.active == false"

use

ng-mouseover="hotspot.class== 'active'" 
ng-mouseout="hotspot.class== ''"

and you can then utilize hotspot.class in ng-class as follows:

ng-class="hotspot.class"

Please refer to the demonstration below:

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {

  $scope.items = [{
    id: 1
  }, {
    id: 2
  }, {
    id: 3
  }, {
    id: 4
  }]

});

.red {
  background-color: yellow;
}
p {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="homeCtrl">

    <p ng-repeat="i in items" ng-mouseover="i.class='red'" ng-class="i.class" ng-mouseout="i.class = ''">{{i.id}}</p>
  </div>
</div>

Answer 4

Instead of

ng-mouseover="hovered.active == true" 
ng-mouseout="hovered.active == false"

use

ng-mouseover="hotspot.class== 'active'" 
ng-mouseout="hotspot.class== ''"

and you can then utilize hotspot.class in ng-class as follows:

ng-class="hotspot.class"

Please refer to the demonstration below:

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {

  $scope.items = [{
    id: 1
  }, {
    id: 2
  }, {
    id: 3
  }, {
    id: 4
  }]

});

.red {
  background-color: yellow;
}
p {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="homeCtrl">

    <p ng-repeat="i in items" ng-mouseover="i.class='red'" ng-class="i.class" ng-mouseout="i.class = ''">{{i.id}}</p>
  </div>
</div>

Answer 5

Answer №3

Check out the code snippet below:

<div class="col-md-4 col-xs-12 col-lg-4" ng-repeat="item in objects"> 
<button type="button" class="btn btn-sm pull-right" ng-class="item.style" ng-mouseover="item.style='newClass'" >

Create a new class called "test" and swap out the ng-click event for ng-mouseover.

Answer 6

Check out the code snippet below:

<div class="col-md-4 col-xs-12 col-lg-4" ng-repeat="item in objects"> 
<button type="button" class="btn btn-sm pull-right" ng-class="item.style" ng-mouseover="item.style='newClass'" >

Create a new class called "test" and swap out the ng-click event for ng-mouseover.

What is the best way to apply ng-style to a single element that was generated using $index within an ng-repeat loop

Answer №1

Answer №2

Answer №3

Similar questions

Contrasting behavior in JavaScript experienced in development versus production environments

What is the best way to retrieve the offsetHeight of a Component Element using Vue.js?

Alert: Unauthorized hook call and Exception: Cannot access properties of null (reading 'useState')

Load various types of classes and run functions with matching names

Troubleshooting Hover Problem with D3 Chord Example on Internet Explorer 11

Conceal tab content by clicking outside of the tab or its contents

Yii2 pjax not refreshing properly when updating records in the gridview

Tips for always focusing on a textarea within an Angular UI modal when opening the modal

How to implement variables within the .map() function in JavaScript?

Using ng-repeat to filter items within a select box

"Consistent Behavior: jQuery ajax always triggers fail event, even when success is expected

What steps do I need to take to have Greasemonkey execute a function upon the completion of an AJAX call

Switch the background image of a div when hovering over a different div that is not its parent or sibling

AngularJS - The Joy of Nested States

Resetting dynamic form changes in Vue.js explained

Save to a JSON file

JavaScript newbie diving into the revealing module pattern

Restricting JQuery pop-up to be shown only once

Retrieving the elapsed time in seconds from a timer function and displaying it in my

Troubleshooting error: Unable to access property 'post' in Angular Service when using $http