Manipulating with sibling DOM elements using angularJS

Question

Let's say we have some div with 5 img elements. On hover, I want to change the class on all elements on the left.

<div id="stars">
     <img src="star.png" data-rating="1" ng-class="{rtHover: hover}" ng-mouseover="hoveredStars($event, 1)"/>
     <img src="star.png" data-rating="2" ng-class="{rtHover: hover}" ng-mouseover="hoveredStars($event, 2)"/>
     <img src="star.png" data-rating="3" ng-class="{rtHover: hover}" ng-mouseover="hoveredStars($event, 3)"/>
     <img src="star.png" data-rating="4" ng-class="{rtHover: hover}" ng-mouseover="hoveredStars($event, 4)"/>
     <img src="star.png" data-rating="5" ng-class="{rtHover: hover}" ng-mouseover="hoveredStars($event, 5)"/>
</div>

I want on hover to change "hover" variable on sibling elements, but don't know how to access them.

$scope.hoveredStars = function ($event, $selectedRating) {
    // Handling stars
}

Is the hover variable not defined on scope. You can directly do $scope.hover=somevalue. Not clear about the issue. — Chandermani
– Chandermani, Commented Mar 9, 2014 at 14:23
Issue is how to access first and second img element and change his class if I hover third img element. — dormitkon
– dormitkon, Commented Mar 9, 2014 at 14:24

atondelier · Accepted Answer · 2014-03-09 15:44:53Z

2

Accessing sibling scopes

Access with $$prevSibling and $$nextSibling properties of your scopes.

Playing with an integer

Instead of having to access siblings scopes, manipulate an integer so that ng-class directive would become something like that:

ng-class="{ rtHover: 3 < myInteger }"

Then your hoveredStar would just have to set that integer.

Performance concern

Such a rate component, if used intensively in a same page, should not be an angular component since it generates a lot of digestions from the root scope.

answered Mar 9, 2014 at 15:44

atondelier

2,43417 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Manipulating with sibling DOM elements using angularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related