it-swarm.com.de

ng-mouseover und lassen Sie das Element mit der Maus in anglejs umschalten

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

Der Code ist lächerlich, weil ich denke, dass es zu viel ist. Ich denke es kann vereinfacht werden. Wie auch immer, das Ergebnis schaltet das gesamte Element um, sobald es in der Schwebe gehalten wird. Ich habe jQuery-Hintergrund, daher habe ich keine Ahnung, wie ein einzelner Artikel in ng-repeat funktioniert.

63
user3398172

Winkellösung

Sie können es so beheben:

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

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

Der Kontext von ngMouseover (und ähnlichen Funktionen) ist ein aktueller Elementbereich. Dies bezieht sich also auf den aktuellen untergeordneten Bereich.

Außerdem müssen Sie ngRepeat auf li setzen:

<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-Lösung

Wenn dies jedoch nur mit CSS möglich ist, ist dies die optimale Lösung und es ist keine JS erforderlich:

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

Ich würde die Zuordnung einfach in ng-mouseover und ng-mouseleave durchführen lassen; keine Notwendigkeit, js-Datei zu stören :)

<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

Ich würde wahrscheinlich dein Beispiel so ändern, dass es so aussieht:

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

Ich weiß, es ist ein subtiler Unterschied, macht die Domäne jedoch weniger an UI-Aktionen gebunden. Geistig macht es leichter, an ein Element zu denken, das bearbeitet werden kann, als überfahren zu werden.

Beispiel jsFiddle .

12
Josh

Etwas spät hier, aber ich habe festgestellt, dass dies ein allgemeines Problem ist, das eine benutzerdefinierte Anweisung wert ist. So könnte das aussehen:

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

  });

Sie können es so verwenden:

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

Hier ist ein Beispiel mit nur CSS für das . In dem Beispiel verwende ich SASS und SLIM.

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

Schlank:

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