ng-mouseover e deixe para alternar item usando o mouse em angularjs

HTML:

  • {{task.name}}
  • Edit

JS:

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

O código é ridículo porque eu acho demais. Eu acho que pode ser simplificado. De qualquer forma, o resultado alterna todo o item quando ele é exibido. Eu tenho experiência em jQuery, então não tenho idéia de como fazer um item único funcionar em ng-repeat .

Solução angular

Você pode corrigi-lo assim:

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

Dentro do contexto de funções ngMouseover (e semelhantes) é um escopo de item atual, portanto, isso se refere ao escopo filho atual.

Além disso, você precisa colocar o ngRepeat no li :

 
  • {{task.name}} Edit

Demonstração : http://plnkr.co/edit/eGohFqiGKmkonmLwT3g1?p=preview

Solução CSS

No entanto, quando possível, tente fazer essas coisas apenas com CSS, essa seria a solução ideal e não seria necessário o JS:

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

Eu simplesmente faria a atribuição acontecer no ng-mouseover e ng-mouseleave; não precisa incomodar o arquivo js 🙂

 
  • {{task.name}}
  • Edit

Eu provavelmente mudaria seu exemplo para ficar assim:

 
  • {{task.name}}
  • Edit
//js $scope.enableEdit = function(item){ item.editable = true; }; $scope.disableEdit = function(item){ item.editable = false; };

Eu sei que é uma diferença sutil , mas torna o domínio um pouco menos limitado a ações da interface do usuário. Mentalmente, fica mais fácil pensar em um item sendo editável, em vez de ter sido mimado.

Exemplo jsFiddle: http://jsfiddle.net/jwcarroll/u8fHc/

Um pouco atrasado aqui, mas descobri que este é um problema comum que vale a pena ser tratado por uma diretiva personalizada. Veja como isso pode parecer:

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

Você pode usá-lo assim:

 
  • edit
  • Aqui está um exemplo com apenas CSS para isso. No exemplo estou usando SASS e SLIM.

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

    Fino:

     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 

    Mesmo você pode fazer isso sem nenhum método

      {{task.name}} Editar