我正在尝试使用angular.js模拟聚焦效果或悬停效果。最终,这将应用于<tr>,但是目前这仅仅是概念证明。



<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example70-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
</head>
<body ng-app="">
  <button ng-mouseover="count = count + 1; myMousedOver={'background-color': '#eeeeee'}" ng-init="count=0">
    <!--count = count + 1 // not relevant; -->
    Increment (when mouse is over)
  </button>
  <span ng-style="myMousedOver">count: {{count}}</span>
</body>
</html>





在这里,它正在改变颜色,但是颜色仍然存在。我不知道如何将css重置为background-color:#ffffff,当该按钮停止滑过鼠标时。 (我看到我正在设置css并将其保持不变)我什至不知道是否可以在ng-mouseover类中放置if语句,这是我首次尝试解决此问题。

plunkr上的代码段:http://plnkr.co/edit/kigG9r2vW8HdOg8WrF5i?p=preview

最佳答案

实际上,有一个名为ngMouseLeave的角度指令可以完全满足您的要求。只需在按钮上扔一个ngMouseLeave并减少计数并更改其颜色即可。查看文档here

编辑:这是一个plunkr for reference和一个代码段:



<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example70-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
</head>
<body ng-app="">
   <button ng-mouseover="count = count + 1; myMousedOver={'background-color': '#eeeeee'}" ng-mouseLeave="myMousedOver={'background-color': ''}; count = count - 1" ng-init="count=0"> <!--count = count + 1; -->
   Increment (when mouse is over)
 </button>
 <span ng-style="myMousedOver">count: {{count}}</span>
</body>
</html>

09-16 22:21