AngularJS 中常用鼠标操作

前端之家收集整理的这篇文章主要介绍了AngularJS 中常用鼠标操作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

AngularJS 中 常用鼠标的操作 (ng-mouseenter 等操作)@H_403_2@

主要用于网站开发, 鼠标所出发的事件, 本文主要介绍两个ng-mouseenter 与 ng-mouseleave 操作, 其他事件操作类似@H_403_2@

  • 1.ng-mouSEOver (告诉 AngularJS 鼠标移动到指定的 HTML 元素上时要执行的操作)
  • 2.ng-mousemove(鼠标指针在元素上移动时执行表达式)
  • 3.ng-mouseenter(鼠标穿过所要执行表达式)
  • 4.ng-mousedown(鼠标按下时执行表达式)
  • 5.ng-mouseleave(鼠标离开时执行表达式)

ng-mouseenter 与 ng-mouseleave 一起使用来介绍

1 与ng-show 结合使用@H_403_2@

代码块(只存在html中)@H_403_2@

<div class="col-md-12" style="padding: 0px; text-align: center"ng-mouseenter = "selShow = true; selNoShow = false;" ng-mouseleave = "selShow = false;selNoShow = true;"> <div class = "col-md-12" style = "padding:0px;"ng-show = "selShow"> 我是好人 </div> <div class = "col-md-12" style = "padding:0px;"ng-show = "selNoShow"> 不, 你是坏人 </div> </div> 注释:需要再JS文件中设定默认的一个ng-show 为真: 例如:$scope.selShow = false;$scope.selNoShow = true; 效果为 先实现不, 你是坏人, 当鼠标进入显示我是好人, 离开显示不, 我是坏人

1 ng-mouseenter 与 ng-mouseleave 触发时间使用@H_403_2@

html:@H_403_2@

<div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis" ng-mouseenter = "itemClick($index,item.retail_price,item.product_cat_pic)">
                                                            </div>

js中执行操作:@H_403_2@

$scope.itemClick = function(index,price,url){

       alert("括号中代表传递操作");

    }

注释

本文主要讲解两个事件方法的使用, 是菜鸟教程中没有涉及到的使用, 希望对大家有所帮助, 想要学更多基础AngularJS 开发技术可见菜鸟教程或者AngularJS官网API@H_403_2@

猜你在找的Angularjs相关文章