ng-mouseover，并在angularjs中使用鼠标离开以切换项目

一尘不染

ng-mouseover，并在angularjs中使用鼠标离开以切换项目

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

该代码太荒谬了，因为我认为它太多了。我认为可以简化。无论如何，一旦将结果悬停，结果就会切换所有项目。我有jQuery背景，所以我不知道如何在中使用单个项目ng- repeat。

阅读 326

2020-07-04

共1个答案

一尘不染

角解

您可以这样解决：

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

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

在ngMouseover（和类似功能）函数的内部，上下文是当前项目的范围，因此它是指当前子范围。

你也需要把ngRepeat上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>

演示版

CSS解决方案

但是，如果可能的话，尝试仅使用CSS进行处理，这将是最佳解决方案，并且不需要JS：

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

2020-07-04