ng-mouseover and leave to toggle item using mouse in angularjs

Question

HTML     lt ul ng-repeat  task in tasks  gt       lt li ng-mouseover  hoverIn    ng-mouseleave  hoverOut    gt   task name   lt  li gt       lt span ng-show  hoverEdit  gt  lt a gt Edit lt  a gt  lt  span gt   lt  ul gt    JS    scope hoverIn   function         scope hoverEdit   true       scope hoverOut   function         scope hoverEdit   false       The code is ridiculous because I think it s too much  I think it can be simplified  Anyway the result toggle all the item once it s hovered  I ve jQuery background  so I have no idea how to make single item work in ng-repeat

User · Accepted Answer

Angular solution

You can fix it like this:

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

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

Inside of ngMouseover (and similar) functions context is a current item scope, so this refers to the current child scope.

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>

Demo

CSS solution

However, when possible try to do such things with CSS only, this would be the optimal solution and no JS required:

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

User · Answer

I would simply make the assignment happen in the ng-mouseover and ng-mouseleave  no need to bother js file      lt ul ng-repeat  task in tasks  gt       lt li ng-mouseover  hoverEdit   true  ng-mouseleave  hoverEdit   false  gt   task name   lt  li gt       lt span ng-show  hoverEdit  gt  lt a gt Edit lt  a gt  lt  span gt   lt  ul gt

User · Answer

Here is example with only CSS for that  In example I m using 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     amp --joined-state     position  relative     span        animate opacity       span last-of-type        invisible        transform translateX -50          position  absolute       left  50        amp  hover       span first-of-type          invisible       span last-of-type          visible         border-color  blue

User · Answer

A little late here  but I ve found this to be a common problem worth a custom directive to handle  Here s how that might look      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 like this    lt li toggle-on-hover  editableProp    editableProp  gt edit lt  li gt

User · Answer

I d probably change your example to look like this    lt ul ng-repeat  task in tasks  gt     lt li ng-mouseover  enableEdit task   ng-mouseleave  disableEdit task   gt   task name   lt  li gt     lt span ng-show  task editable  gt  lt a gt Edit lt  a gt  lt  span gt   lt  ul gt     js  scope enableEdit   function item     item editable   true       scope disableEdit   function item     item editable   false       I know it s a subtle difference  but makes the domain a little less bound to UI actions  Mentally it makes it easier to think about an item being editable rather than having been moused over   Example jsFiddle

[javascript] ng-mouseover and leave to toggle item using mouse in angularjs

Angular solution

CSS solution

Examples related to javascript

Examples related to jquery

Examples related to angularjs