我对AngularJS相对较新,我很喜欢它的每一刻!我有一个无序的产品清单。当用户将鼠标悬停在它们上面时,我需要list元素为它们设置active
类。我目前正在这样做:
<ul>
<li ng-repeat="product in products" ng-mouseover="showDetails(product, $event)" ng-class="{active: current == product}">{{product}}</li>
</ul>
我的showDetails如下:
function showDetails(product, $event) {
$scope.current = product;
...some other logic...
}
现在,一切正常,但是,我想知道是否可以设置没有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>
这次我应该如何编写showDetails函数来设置类?我的第一次尝试是:
function showDetails($event) {
var text = $event.target.textContent;
$scope.current = text
}
但是我该怎么做ng-class属性?
答案 0 :(得分:1)
如果无法使用纯CSS解决方案,那么您可以在directive
内使用JQuery创建directive
并切换CSS类。将ul
上的指令应用为属性或类。在那个指令中你可以做到
iElement.find("li").hover(...