AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。以下是AngularJS支持的事件。
一、AngularJS常用事件
------------------------------------------------------华丽风格线-----------------------------------------
NG-CLICK :点击事件
NG-DBL-CLICK :双击事件
NG-MOUSEDOWN :键盘
NG-MOUSEUP :鼠标按下弹起,左右中间按下弹起都会触发事件
NG-MOUSEENTER :鼠标进入事件
NG-MOUSELEAVE :鼠标离开事件,鼠标在HTML元素上 离开事要执行的操作;
NG-MOUSEMOVE :鼠标移动事件,鼠标在 HTML元素上 移动时要执行的操作;
NG-MOUSEOVER :鼠标进入事件;作用是当鼠标MOUSEOVER时显示隐藏的内容,鼠标MOUSELEAVE时隐藏内容;
NG-MOUSEOVER :鼠标进入事件;作用是当鼠标MOUSEOVER时显示隐藏的内容,鼠标MOUSELEAVE时隐藏内容;
NG-KEYDOWN :键盘按键按下事件
NG-KEYUP :键盘按键按下并松开事件
NG-KEYPRESS :键盘按键按下事件
NG-CHANGE :在 HTML 元素值改变时需要执行的操作,需要搭配NG-MODEL使用;
事件在值的每次改变时触发,它不需要等待一个完成的修改过程,或等待失去焦点的动作;
事件只针对输入框值的真实修改,而不是通过 JAVASCRIPT 来修改。
JS代码:
angular.module("myapp",[]).controller("mycon",function($scope){ $scope.flag = false; // 勾选复选框事件 $scope.changeme=function(flag){ flag?alert("选中"):alert("取消"); } // 设置文本框修改 次数 $scope.countss=0; $scope.changeyou=function(){ $scope.countss++; $scope.new=$scope.yflag; }; });
html代码:
<!DOCTYPE html> <html ng-app="myapp"> <head> <meta charset="UTF-8"> <title>ng-change用法</title> <script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/item/ng-change.js" type="text/javascript" charset="utf-8"></script> </head> <body ng-controller="mycon"> <h1>ng-change传递值,当值发生改变时弹出对话框显示当先传递参数的状态</h1> <div> <input type="checkbox" ng-model="flag" ng-change="changeme(flag)"/> 点击我! </div> <h1>ng-change</h1> <div> <input type="text" ng-change="changeyou()" ng-model="yflag" /> <p style="color: blue;">{{countss}}</p> <input type="text" ng-model="new" /> </div> </body> </html>
二、AngularJS常用指令
ng-pattern : 校验规则,栗子ng-pattern='/^([a-zA-Z*/]{1,3})$/';
novalidate : 表单校验,直接添加到input文本框标签上;
ng-if : 利用ng-if指令来判断对象元素是否为空;
ng-style : 使用AngularJS添加样式,使用 CSS key=>value 对象格式:
指令为 HTML 元素添加 style 属性; 属性值必须是对象,表达式返回的也是对象;
ng-true-value : 给ng-model默认值value赋值,change事件
1.应用场景?
在html页面中点击checkbox 选中复选框时,ng-model 的绑定默认值value是true,取消选中时值value为false.
//选中时,CHECKBOXMODEL 等于 TRUE
<input ng-model="checkboxModel" type="checkbox" >
2.如果我们需要获取的值为字符串或者数字呢?
那么就需要用到 ng-true-value 和ng-false-value
选中checkbox 时:
//注意 ng-true-value 中的值 如果需要显示字符串的话必须使用单引号
<input ng-model="checkboxModel" type="checkbox" ng-true-value=" 'hello wolrd' " >
取消选中checkbox 时:
<input ng-model="checkboxModel" type="checkbox" ng-false-value=" 'bye bye' " >
html代码:
<h2 color="red">4.ng-ture-value使用</h2> <input type="checkbox" ng-model="boxvalue" ng-true-value="1" ng-false-value="3"/> {{boxvalue}}
<div ng-if="boxvalue!=1"> {{boxvalue}} 当默认value!=1值为false,展示信息。 </div>
js代码:
// 复选框显示默认值为空 $scope.boxvalue = " ";