0

私は AngularJS に比較的慣れていませんが、AngularJS のすべての瞬間が大好きです! 製品の順序付けられていないリストがあります。ユーザーがそれらの上にカーソルを置いたときに、リスト要素に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...
}

product現在、すべてが正常に機能していますが、ng-repeat を使用せずにバインドする変数を持たないクラスを設定できるかどうか疑問に思っていました。

<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 属性で何をすればよいのでしょうか?

4

1 に答える 1

1

純粋な CSS ソリューションが不可能な場合は、 を作成し、directiveその 内で JQuery を使用して CSS クラスを切り替えることができますdirective。ディレクティブをul属性またはクラスとして適用します。そのディレクティブでできること

iElement.find("li").hover(...
于 2013-05-13T04:50:39.293 に答える