如何在没有ng-repeat的情况下使用ng-class?

时间:2013-05-13 04:29:59

标签: angularjs

我对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属性?

1 个答案:

答案 0 :(得分:1)

如果无法使用纯CSS解决方案,那么您可以在directive内使用JQuery创建directive并切换CSS类。将ul上的指令应用为属性或类。在那个指令中你可以做到

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