AngularJS ng-change 指令的详解及简单实例

AngularJS ng-change 指令

AngularJS 实例

当输入框的值改变时执行函数:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
 <p>在输入框中输入一些信息:</p>
 <input type="text" ng-change="myFunc()" ng-model="myValue" />
 <p>输入框已经修改了 {{count}} 次。</p>
</div>

<script>
 angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
   $scope.count = 0;
   $scope.myFunc = function() {
    $scope.count++;
   };
  }]);
</script>
</body>
</html>

运行结果：

在输入框中输入一些信息:

输入框已经修改了 0 次。

定义和用法

ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

ng-change 指令需要搭配 ng-model 指令使用。

AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。

ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作。

ng-change 事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改。

语法

<element ng-change="expression"></element>

<input>, <select>, 和  <textarea> 元素支持。

参数值

值 描述
expression 元素值改变时执行表达式。

以上就是对AngularJS ng-change 指令的知识整理，后续继续补充。

赞 (0)

相关推荐

  • AngularJs ng-change事件/指令的用法小结

    本文介绍了AngularJs ng-change事件/指令的小结,分享给大家,也给自己留个笔记 定义和用法 ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作. ng-change 指令需要搭配 ng-model 指令使用. AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件,ng-change 表达式与原生的 onchange 事件都会执行. ng-change 事件在值的每次改变时触发,它不需要

  • AngularJS ng-change 指令的详解及简单实例

    AngularJS ng-change 指令 AngularJS 实例 当输入框的值改变时执行函数: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>

  • MySQL 复制详解及简单实例

    MySQL 复制详解及简单实例 主从复制技术在MySQL中被广泛使用,主要用于同步一台服务器上的数据至多台从服务器,可以用于实现负载均衡,高可用和故障切换,以及提供备份等等.MySQL支持多种不同的复制技术,诸如单向,半同步异步复制等以及不同级别的复制,诸如数据库级别,表级,跨库同步等等.本文简要描述了一个基本的主从复制并给出示例. 1.复制的基本原理(步骤) a.在主库上把数据更改记录的二进制日志(binary log)     b.从库上的I/O线程连接到主库并请求发送其二进制日志文件(主库

  • JSP 注释的详解及简单实例

    JSP 注释的详解及简单实例

     JSP 注释的详解及简单实例 一 三种格式 二 举例 <body> <h1>大家好</h1> <hr> <!-- 我是HTML注释,在客户端可见 --> <%-- 我是JSP注释,在客户端不可见 --%> <% //单行注释 /*多行注释*/ out.println("大家好,欢迎大家学习JAVAEE开发."); %> <br> 你好,<%=s %><br> x+y

  • mybatis分页插件pageHelper详解及简单实例

    mybatis分页插件pageHelper详解及简单实例 工作的框架spring springmvc mybatis3 首先使用分页插件必须先引入maven依赖,在pom.xml中添加如下 <!-- 分页助手 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>3.7.5

  • Java File类的详解及简单实例

    Java File类的详解及简单实例 1. File():构造函数,一般是依据文件所在的指定位置来创建文件对象.  CanWrite():返回文件是否可写. CanRead():返回文件是否可读. CompareTo(File pathname):检查指定文件路径间的顺序. Delet():从文件系统内删除该文件. DeleteOnExit():程序顺利结束时从系统中删除文件. Equals(Object obj):检查特定对象的路径名是否相等. Exists():判断文件夹是否存在. GetA

  • JAVA 注解详解及简单实例

    JAVA 注解详解及简单实例 何为注解 注解(Annotation)又称为元数据,在JDK1.5后引入,它的作用是: 生成文档  这是注解的原始用途,可以通过注解生成JavaDoc文档 跟踪代码的依赖性  可以通过注解替代配置文件,简化项目的配置.现有的许多框架都采用这个功能减少自己的配置. 编译检查  在编译时进行格式检查,例如@Override 基础注解 Java目前内置了三种标准注解,以及四种元注解.四种元注解负责创建其他的注解. 三种标准注解 @Override,表示当前的方法覆盖超类中

  • 微信小程序中input标签详解及简单实例

    微信小程序中input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对

  • linux 下实现sleep详解及简单实例

    linux 下实现sleep详解及简单实例

    linux 下实现sleep详解及简单实例 sleep: 普通版本 1.基本设计思路: 1>注册SIGALRM信号的处理函数:    2>调用alarm(nsecs)设定闹钟: 3>调⽤pause等待,内核切换到别的进程运行: 4>nsecs秒之后,闹钟超时,内核发SIGALRM给这个进程 ; 5>从内核态返回这个进程的⽤户态之前处理未决信号,发现有SIGALRM信号,其处理函数是sig_alrm; 6> 切换到用户态执行sig_alrm函数,进⼊sig_alrm函数时

  • Golang与python线程详解及简单实例

    Golang与python线程详解及简单实例 在GO中,开启15个线程,每个线程把全局变量遍历增加100000次,因此预测结果是 15*100000=1500000. var sum int var cccc int var m *sync.Mutex func Count1(i int, ch chan int) { for j := 0; j < 100000; j++ { cccc = cccc + 1 } ch <- cccc } func main() { m = new(sync.

  • C语言中getch()函数详解及简单实例

    C语言中getch()函数详解及简单实例 前言: 这个函数是一个不回显函数,当用户按下某个字符时,函数自动读取,无需按回车,有的C语言命令行程序会用到此函数做游戏,但是这个函数并非标准函数,要注意移植性! 所以有这样的一个接口,那就很牛逼了,至少可以做个游戏来玩下,结合ASCII码,很容易写个方向键控制的2048或者贪吃蛇等等有趣的游戏出来. 以下是以一个简单的例子: 你会发现当你按下对应的按键的时候就会打印相应的语句. #include <stdio.h> #include <fcnt

随机推荐