ng-mouseover并留下来在angularjs中使用鼠标切换项目
HTML：
<ul ng-repeat="task in tasks"> <li ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">{{task.name}}</li> <span ng-show="hoverEdit"><a>Edit</a></span> </ul> JS：
$scope.hoverIn = function(){ $scope.hoverEdit = true; }; $scope.hoverOut = function(){ $scope.hoverEdit = false; };
代码是荒谬的，因为我觉得太多了。 我认为这可以简化。 无论如何，结果切换所有项目一旦它被徘徊。 我有jQuery背景，所以我不知道如何使单个项目在ng-repeat 。
有angular的解决scheme
你可以像这样解决它：
$scope.hoverIn = function(){ this.hoverEdit = true; }; $scope.hoverOut = function(){ this.hoverEdit = false; };
在ngMouseover（和类似的）函数的上下文中是一个当前的项目范围，所以这指的是当前的子范围。
你也需要把ngRepeat放在li ：
<ul> <li ng-repeat="task in tasks" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()"> {{task.name}} <span ng-show="hoverEdit"> <a>Edit</a> </span> </li> </ul>
演示 ： http : //plnkr.co/edit/eGohFqiGKmkonmLwT3g1?p=preview
CSS解决scheme
但是，如果可能的话，试着用CSS做这样的事情，这将是最佳的解决scheme，不需要JS：
ul li span {display: none;} ul li:hover span {display: inline;}
我只是简单地把这个任务发生在ng-mouseover和ng-mouseleave中; 不需要打扰js文件:)
<ul ng-repeat="task in tasks"> <li ng-mouseover="hoverEdit = true" ng-mouseleave="hoverEdit = false">{{task.name}}</li> <span ng-show="hoverEdit"><a>Edit</a></span> </ul>
我可能会改变你的例子看起来像这样：
<ul ng-repeat="task in tasks"> <li ng-mouseover="enableEdit(task)" ng-mouseleave="disableEdit(task)">{{task.name}}</li> <span ng-show="task.editable"><a>Edit</a></span> </ul> //js $scope.enableEdit = function(item){ item.editable = true; }; $scope.disableEdit = function(item){ item.editable = false; };
我知道这是一个微妙的差异 ，但使域名less一些UI操作的约束。 在精神上，它使得更容易想到一个项目是可编辑的，而不是被蒙上了阴影。
示例jsFiddle： http : //jsfiddle.net/jwcarroll/u8fHc/
有点晚，但我发现这是一个值得自定义指令处理的常见问题。 以下是可能的样子：
.directive('toggleOnHover', function(){ return { restrict: 'A', link: link }; function link(scope, elem, attrs){ elem.on('mouseenter', applyToggleExp); elem.on('mouseleave', applyToggleExp); function applyToggleExp(){ scope.$apply(attrs.toggleOnHover); } } });
你可以像这样使用它：
<li toggle-on-hover="editableProp = !editableProp">edit</li>
这里只有CSS的例子。 在例子中，我使用SASS和SLIM。
https://codepen.io/Darex1991/pen/zBxPxe
瘦：
a.btn.btn--joined-state span joined span leave
上海社会科学院：
=animate($property...) @each $vendor in ('-webkit-', '') #{$vendor}transition-property: $property #{$vendor}transition-duration: .3s #{$vendor}transition-timing-function: ease-in =visible +animate(opacity, max-height, visibility) max-height: 150px opacity: 1 visibility: visible =invisible +animate(opacity, max-height, visibility) max-height: 0 opacity: 0 visibility: hidden =transform($var) @each $vendor in ('-webkit-', '-ms-', '') #{$vendor}transform: $var .btn border: 1px solid blue &--joined-state position: relative span +animate(opacity) span:last-of-type +invisible +transform(translateX(-50%)) position: absolute left: 50% &:hover span:first-of-type +invisible span:last-of-type +visible border-color: blue
即使你没有任何方法可以做到这一点
- {{task.name}}编辑
