ng-repeat 和 mouseover 事件答案

【问题标题】：ng-repeat and the mouseover eventng-repeat 和 mouseover 事件
【发布时间】：2013-05-19 03:09:36
【问题描述】：

这似乎是一个范围问题，但我不确定。我的目标是突出显示表格中的单行。这意味着任何先前突出显示的行都将返回到未突出显示的状态。这些行是使用 ng-repeat 指令创建的，如下所示：

<div id="myFedContents" style="height:320px" ng-controller="Controller2" class="scroller">
    <table border="0" class="span12 table table-condensed" style="margin-left:0px" id="tblData">
        <thead>
            <tr><th>Year</th><th>Name</th><th>Useful Flag</th></tr>
        </thead>
        <tbody id="allRows">
            <tr ng-repeat="item in itemlist | filter:thisText" ng-style="myStyle">            <td class="span1" valign="top"><a tabindex="-1" href="#">{{item.year}}</a></td>
                <td id="{{item.id}}">                                   <a tabindex="-1" href="#" ng-click="myStyle={'background-color':'#cccccc'};">{{item.name}}</a>
                </td>                                     <td>
                    <a href="#" class="btn btn-small btn-link">{{item.usefulflag}</a> 
                </td>                                 </tr>                             
        </tbody>
    </table>
</div>

我在 .js 文件中有如下代码：

$("tr").mouseenter(function(){
    alert("mouseenter");
});

表头中的行对警报做出反应，但 ng-repeat 创建的行没有反应。我该如何纠正？

【问题讨论】：

标签： mouseover ng-repeat

【解决方案1】：

您实际上可以通过将 ng-class 与 ng-mouseenter 和 ng-mouseleave 结合使用来实现此效果，如下所示：

<div id="myFedContents" style="height:320px" ng-controller="Controller2" class="scroller">
  <table border="0" class="span12 table table-condensed" style="margin-left:0px" id="tblData">
    <thead>
      <tr>
        <th>Year</th>
        <th>Name</th>
        <th>Useful Flag</th>
      </tr>
    </thead>
    <tbody id="allRows">
      <tr ng-repeat="item in itemlist | filter:thisText" ng-style="myStyle" ng-class="highlightclass" ng-mouseenter="highlightclass='highlight'" ng-mouseleave="highlightclass=''">
        <td class="span1" valign="top"><a tabindex="-1" href="#">{{item.year}}</a>
        </td>
        <td id="{{item.id}}"> <a tabindex="-1" href="#" ng-click="myStyle={'background-color':'#cccccc'};">{{item.name}}</a>
        </td>
        <td>
          <a href="#" class="btn btn-small btn-link">{{item.usefulflag}</a> 
        </td>
      </tr>
    </tbody>
  </table>
</div>

在这种情况下，您不需要 jquery 语法。如果你还没有读过https://stackoverflow.com/a/15012542/281335。

【讨论】：