0

マウスが行に入ったときにテーブルの行にホバー効果を追加しようとしています。このために、私は JQuery と on()-Method を使用しています。テーブルは AngularJS の ng-repeat で作成されます。

Firefox では、すべて正常に動作します。行に入ると、たとえば色が変わります。IE8 では、JQuery はテーブル行の AngularJS 属性を td で解決できません。テーブルヘッダーを使用すると、正常に機能します。

<table class="testClass" id="searchTextResults">
        <tr>
            <th ng-repeat="item in friends[0].Order">
                {{item}}
            </th>
        </tr>
        <tr ng-repeat="friend in friends | filter:searchText">
            <td ng-repeat="item in friend.Order">
                {{friend[item]}}
            </td>
        </tr>
    </table>

これは、「ngRepeat: item in friend.Order」と警告したときの IE8 の innerHTML の内容です。

また、JSON2.0 を含めようとし、document.createElement() ソリューションを試しましたが、何も機能しませんでした。

小さなテストスクリプトは次のとおりです。

$(document).ready(function () {
   $(".testClass tr").on("mouseenter mouseleave", function (event) {
       alert(this.innerHTML);
   });
});

これを解決する方法はありますか？

4

1 に答える 1

0

そのため、行に対して何らかの効果やアニメーションを実行したいとします。これは、標準の jQuery ではなく、ディレクティブを使用して行います。Angular の方法で物事を行う場合、dom 操作はディレクティブでのみ行われます。

http://jsfiddle.net/engZB/

app.directive("animateHover", function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).on("mouseenter", function() {
                $(this).find("td").css("background-color","blue");
                //Anything you want to do with the elements here
            });
            $(element).on("mouseleave", function() {
                $(this).find("td").css("background-color","");
                //Anything you want to do with the elements here
            });
        }
    }
});

<tr ng-repeat="friend in friends | filter:searchText" animate-hover>
    <td ng-repeat="item in friend.Order">
        {{friend[item]}}
    </td>
</tr>
于 2013-07-26T12:39:39.383 に答える