zoukankan      html  css  js  c++  java
  • AngularJS支持的事件

    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 = " ";
    
  • 相关阅读:
    windows下用python转换markdown到html
    windows下安装pip和easy_install
    Getting Real 摘记
    使iis支持asp.net扩展
    Linux IO模型
    kdissert:linux下的自由脑图软件
    debian下配置双核cpu
    内核:为了fan的健康,我的重新编译记录
    科研在每个人的生活中
    Donald Ervin Knuth:最年轻的图灵奖高德纳
  • 原文地址:https://www.cnblogs.com/blogslee/p/7245842.html
Copyright © 2011-2022 走看看