javascript - angular 5 mouseover



ng-mouseover und lassen Sie den Artikel mit der Maus in anglejs wechseln (4)

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, also habe ich keine Ahnung, wie man einzelne Elemente in ng-repeat .


Answer #1

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.

Sie müssen auch ngRepeat auf 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-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;}

Answer #2

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> 

Answer #3

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>

Answer #4

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ß , dass dies ein geringfügiger Unterschied ist , aber die Domäne ist weniger an UI-Aktionen gebunden. Geistig macht es leichter, an ein Element zu denken, das bearbeitet werden kann, als überfahren zu werden.

Beispiel jsFiddle .





angularjs