使用angularJS操作兄弟DOM元素

Question

假设我们有一些带有5个img元素的div。 在悬停时，我想更改左侧所有元素的类。

<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>

我想悬停在兄弟元素上更改“悬停”变量，但不知道如何访问它们。

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

Answer 1

访问兄弟范围

使用范围的$$prevSibling和$$nextSibling属性进行访问。

玩一个整数

而不是必须访问兄弟范围，操纵一个整数，以便ng-class指令将变为这样：

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

然后你的hoveredStar只需要设置整数。

表现关注

如果在同一页面中密集使用，这样的速率分量不应该是角分量，因为它从根范围产生大量消化。