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

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

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

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

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    lt ul gt       lt li ng-repeat  task in tasks  ng-mouseover  hoverIn    ng-mouseleave  hoverOut    gt            task name            lt span ng-show  hoverEdit  gt               lt a gt Edit lt  a gt           lt  span gt       lt  li gt   lt  ul gt    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

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

Examples related to javascript

Examples related to jquery

Examples related to angularjs