[英]Manipulating with sibling DOM elements using angularJS
Let's say we have some div with 5 img elements. 假设我们有一些带有5个img元素的div。 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
}
Accessing sibling scopes 访问兄弟范围
Access with $$prevSibling
and $$nextSibling
properties of your scopes. 使用范围的
$$prevSibling
和$$nextSibling
属性进行访问。
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
指令将变为这样:
ng-class="{ rtHover: 3 < myInteger }"
Then your hoveredStar
would just have to set that integer. 然后你的
hoveredStar
只需要设置整数。
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. 如果在同一页面中密集使用,这样的速率分量不应该是角分量,因为它从根范围产生大量消化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.