Angularjs 如何在不重复ng的情况下使用ng类？

我对AngularJS比较陌生，我喜欢它的每一刻！我有一份无序的产品清单。当用户将鼠标悬停在它们上方时，我需要在列表元素上设置一个

active

类。我目前正在这样做：

<ul>
    <li ng-repeat="product in products" ng-mouseover="showDetails(product, $event)" ng-class="{active: current == product}">{{product}}</li>
</ul>

现在，一切都很好，但是，我想知道是否可以在没有ng repeat和没有

product

变量绑定的情况下设置类

<ul>
    <li ng-mouseover="showDetails($event)" ng-class="{<i don't know what to put here> }">foo</li>
    <li ng-mouseover="showDetails($event)" ng-class="{<i don't know what to put here> }">bar</li>
    <li ng-mouseover="showDetails($event)" ng-class="{<i don't know what to put here> }">A</li>  
    <li ng-mouseover="showDetails($event)" ng-class="{<i don't know what to put here> }">B</li>
</ul>

---

但是在ng class属性中我该怎么做呢？

如果不可能使用纯CSS解决方案，那么您可以创建一个

指令

，并在该

指令

中使用JQuery切换CSS类。将指令作为属性或类应用于

ul

。在该指令中，您可以

iElement.find("li").hover(...

---

你可能会问，为什么不使用ng repeat？嗯，有一项要求是尽可能多地使用纯HTML，以便在互联网速度较慢的情况下（这在我所在的地区很常见），用户至少能够看到内容，而ng repeat方法必须等到angular首先加载后才能看到。首先，感谢您的快速回复。这不是那么简单，我需要活动类集，不是背景色或其他颜色，我需要加载与当前产品相关的其他数据。好的。在

指令上

可以将

活动

类设置为悬停。这是否意味着我将所有逻辑从showDetails函数移到指令中？这个指令，比方说一个（A）属性，我应该在每个

元素上应用它，还是应该在父

元素上应用它，并使用事件委托来检测当前目标？你能编辑你的答案让我批准吗？其他人可能会对这个问题的答案感到困惑。

function showDetails($event) {
    var text = $event.target.textContent;
    $scope.current = text
}

iElement.find("li").hover(...