ng-mouseover and leave to toggle item using mouse in angularjs

dfsquser3398172提出了一个问题:ng-mouseover and leave to toggle item using mouse in angularjs,或许与您遇到的问题类似。

回答者dfsq给出了该问题的处理方式:

Angular solution

You can fix it like this:

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

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

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

Also you need to put ngRepeat on 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: http://plnkr.co/edit/eGohFqiGKmkonmLwT3g1?p=preview

CSS solution

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

希望本文对你有帮助,欢迎支持JavaScript中文网

原文链接:stackoverflow.com

上一篇:Angular&apos;s $q.reject() vs deferred.reject()
下一篇:AngularJS - Dependency injection in services, factories, filters etc

相关推荐

  • 运行uni-app报错:sitemap.json Error: 未找到入口 sitemap.json 文件

    运行项目报错sitemap.json Error: 未找到入口 sitemap.json 文件,或者文件读取失败,请检查后重新编译。 解决方法:在pages.json 文件中添加属性"sitemapL...

    6 个月前
  • 走进AngularJs之过滤器(filter)详解

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等。

    4 年前
  • 详解angularJs中自定义directive的数据交互

    就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模块分离。后者我暂时没接触,但数据交互部分却是一样的。所以举几个前者的例子,以备以后忘记。

    4 年前
  • 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期、格式化数字精度、语言本地化、格式化货币等等。但这些过滤器一般都是在VIEW中使用的,比...

    4 年前
  • 详解Angularjs 如何自定义Img的ng-load 事件

    在使用AngularJs的过程中,我们常常会用到一些ng-事件,如ng-click、ng-change等,这些事件都是AngularJs事先为我们定义好的。也有的情况下,我们会用到一些使用频率不高的d...

    4 年前
  • 详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖

    最近在使用AngularJS,发现AngularJS菜鸟教程上的东西太过于基础,很多东西都没有提及,比如今天的一个关于前端的优化问题,懒加载。通过路由实现地址分发的时候,再通过懒加载模式加载你所需的文...

    4 年前
  • 详解AngularJS的通信机制

    现在几乎满世界的人都在问! 外面有人么? 这里是 USS AngularJS, 我们遇到麻烦了,我们的服务讲得是克灵贡语(Klingon) 而我们的控制器不能同它们的Ferengi 指令通信了. 有人...

    4 年前
  • 详解AngularJS中自定义指令的使用

    自定义指令中使用AngularJS扩展HTML的功能。自定义指令使用的“指令”的功能定义。自定义指令只是替换了它被激活的元素。引导过程中AngularJS应用程序找到了匹配的元素,并做好使用自定义指令...

    4 年前
  • 详解AngularJS中的表达式使用

    表达式用于应用程序数据绑定到HTML。表达式都写在双括号就像{{表达式}}。表达式中的行为跟ng-bind指令方式相同。 AngularJS应用表达式是纯javascript表达式,并输出它们被使用的...

    4 年前
  • 详解AngularJS中的表格使用

    表格数据本质上通常是重复的。ng-repeat指令,可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。 &lt;table&gt; &lt;tr&gt; &lt;t...

    4 年前

官方社区

扫码加入 JavaScript 社区