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

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 指令的知识整理,后续继续补充。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索angularjs
, 指令
ng-change
angularjs ng change、angularjs中ng change、angularjs的ng change、angularjs ng指令、angularjs 指令详解,以便于您获取更多的相关知识。

时间: 2024-10-29 07:47:05

AngularJS ng-change 指令的详解及简单实例_AngularJS的相关文章

AngularJS ng-blur 指令详解及简单实例_AngularJS

AngularJS ng-blur 指令 AngularJS 实例 当输入框失去焦点(onblur)时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </

AngularJS 路由详解和简单实例_AngularJS

AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/first http://r

AngularJS 模块详解及简单实例_AngularJS

AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular.module 函数来创建模块: <div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script> "m

AngularJS 依赖注入详解和简单实例_AngularJS

AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则.与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何使用该系统找到依赖 一句话 --- 没事你不要来找我,有事我会

Android Build类的详解及简单实例

Android Build类的详解及简单实例 一.类结构: java.lang.Object ? android.os.Build 二.类概述:从系统属性中提取设备硬件和版本信息. 三.内部类: 1.Build.VERSION 各种版本字符串 2.Build.VERSION_CODES 目前已知的版本代码的枚举类 四.常量:UNKNOWN 当一个版本属性不知道时所设定的值.其字符串值为 unknown . 五.构造方法: Build () 六.静态属性 1.BOARD 主板:The name o

Android 中Seekbar详解及简单实例

Android 中Seekbar详解及简单实例 做到音频播放和音乐播放时,大多数都要用到Seekbar.现在我先简单介绍下Seekbar的几个重要属性. android:max 设置值的大小 . android:thumb="@drawable/" 显示的那个可拖动图标,如果没有设置该参数则为系统默认,如果自己需要重新定义,则将自己需要的图标存放在资源目录 /res/drawable下,然后调用即可. android:thumbOffset 拖动图标的偏量值,可以让拖动图标超过bar的

AngularJS基础 ng-disabled 指令详解及简单示例_AngularJS

AngularJS ng-disabled 指令 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> &

AngularJs Forms详解及简单示例_AngularJS

      控件(input.select.textarea)是用户输入数据的一种方式.Form(表单)是这些控件的集合,目的是将相关的控件进行分组. 表单和控件提供了验证服务,所以用户可以收到无效输入的提示.这提供了更好的用户体验,因为用户可以立即获取到反馈,知道如何修正错误.请记住,虽然客户端验证在提供良好的用户体验中扮演重要的角色,但是它可以很简单地被绕过,因此,客户端验证是不可信的.服务端验证对于一个安全的应用来说仍然是必要的. 一.Simple form 理解双向数据绑定的关键dire

AngularJs expression详解及简单示例_AngularJS

         表达式(Expressions)是类Javascript的代码片段,通常放置在绑定区域中(如{{expression}}).表达式通过$parse服务(http://code.angularjs.org/1.0.2/docs/api/ng.$parse)解析执行. 例如,以下是angular中有效的表达式: 1+2 3*10 | currency user.name 一.Angular表达式 vs. Js 表达式 这很容易让人将angular视图表达式联想为javascript