web-dev-qa-db-fra.com

ng-mouseover et laisser basculer l'élément en utilisant la souris dans 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;
};

Le code est ridicule parce que je pense que c'est trop. Je pense que cela peut être simplifié. Quoi qu'il en soit, le résultat bascule tous les éléments une fois qu'il est survolé. J'ai de l'expérience jQuery, je ne sais donc pas comment faire en sorte que chaque élément fonctionne dans ng-repeat.

javascriptjqueryangularjs
63
user3398172

Solution angulaire

Vous pouvez le réparer comme ça:

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

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

Dans le contexte des fonctions ngMouseover (et similaires), il s'agit d'une étendue d'élément en cours, elle fait donc référence à la portée enfant actuelle.

De plus, vous devez mettre ngRepeat sur 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>

Démo

Solution CSS

Cependant, lorsque cela est possible, essayez de faire de telles choses uniquement avec CSS, ce serait la solution optimale et aucun JS requis:

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

Je voudrais simplement faire la cession dans ng-mouseover et ng-mouseleave; pas besoin de déranger le fichier 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>
19
Riceman

Je changerais probablement votre exemple pour ressembler à ceci:

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

Je sais que c'est une différence subtile, mais rend le domaine un peu moins lié aux actions de l'interface utilisateur. Mentalement, il est plus facile de penser à un élément pouvant être édité plutôt qu’à avoir été déplacé.

Exemple jsFiddle .

12
Josh

Un peu tard, mais j’ai trouvé que c’était un problème courant qui méritait une directive personnalisée à traiter. Voici à quoi cela pourrait ressembler:

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

  });

Vous pouvez l'utiliser comme ceci:

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

Voici un exemple avec seulement CSS pour cela . Par exemple, j'utilise SASS et SLIM.

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

Svelte:

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

TOUPET:

=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
0
Darex1991