Ng-mouseover and leave to switch an item using the mouse in angularjs

Question

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; }; 

The code is ridiculous because I think it is too much. I think this can be simplified. In any case, the result switches the entire element after it hangs. I have a jQuery background, so I have no idea how to make a separate element in ng-repeat .

Answer 1

Corner solution

You can fix it like this:

 $scope.hoverIn = function(){ this.hoverEdit = true; }; $scope.hoverOut = function(){ this.hoverEdit = false; }; 

Inside the ngMouseover (and similar) functions is the context of the current item area, so this applies to the current child area.

Also you need to put ngRepeat on 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> 

demonstration

CSS solution

However, whenever possible, try to do such things only with CSS, this will be the optimal solution, and JS is not required:

 ul li span {display: none;} ul li:hover span {display: inline;} 

Answer 2

I would just make an assignment in ng-mouseover and ng-mouseleave; no need to disturb js file :)

 <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> 

Answer 3

I would probably change your example like this:

 <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; }; 

I know this is a small difference , but makes the domain a little less tied to UI actions. Mentally, it’s easier for you to think that the element is editable, not plastered.

JsFiddle example.

Answer 4

A bit late, but I found this to be a common problem facing a user directive. Here's what it might look like:

  .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); } } }); 

You can use it as follows:

 <li toggle-on-hover="editableProp = !editableProp">edit</li> 

Answer 5

Here is an example with CSS for this. In the example, I use SASS and SLIM.

https://codepen.io/Darex1991/pen/zBxPxe

Slim:

 a.btn.btn--joined-state span joined span leave 

SASS:

 =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 

Answer 6

Even you can do it without any methods

• {{}} Task.name edit