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}}编辑