NG-鼠标悬停和离开angularjs使用鼠标切换项目 [英] ng-mouseover and leave to toggle item using mouse in 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;
};

在code是荒谬的，因为我认为这是太多了。我认为它可以简化。反正结果切换一旦它盘旋的所有项。我有jQuery的背景，所以我不知道如何使单个项目工作 NG-重复。

推荐答案

您可以修复它​​是这样的：

Angular solution

You can fix it like this:

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

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

里面的ngMouseover（或类似）函数上下文是当前项目的范围，所以这是指当前子范围。

Inside of ngMouseover (and similar) functions context is a current item scope, so this refers to the current child scope.

此外，你需要把 ngRepeat 在里：

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

演示：<一href=\"http://plnkr.co/edit/eGohFqiGKmkonmLwT3g1?p=$p$pview\">http://plnkr.co/edit/eGohFqiGKmkonmLwT3g1?p=$p$pview

然而，如果可能尝试做这样的事情利用CSS只，这将是最佳的解决方案，并要求不JS：

However, when possible try to do such things with CSS only, this would be the optimal solution and no JS required:

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

这篇关于NG-鼠标悬停和离开angularjs使用鼠标切换项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！