这似乎是范围问题,但我不确定。我的目标是突出显示表中的单行。这意味着任何先前突出显示的行将返回到未突出显示的状态。使用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创建的行没有任何反应。我怎么纠正?
答案 0 :(得分:3)
你可以通过使用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。