ngChange

当用户更改输入时,执行给定的表达式。表达式是立即进行执行的,这个和javascript的onChange事件的只有在触发事件的变化结束的时候执行不同。

格式:ng-change=”value”

value: 表达式。

使用代码:

  <div ng-app="Demo">
<div ng-controller="testCtrl as ctrl">
<input ng-change="ctrl.fn()" ng-model="ctrl.inputValue" />
</div>
</div>
  (function () {
angular.module("Demo", [])
.controller("testCtrl", testCtrl);
function testCtrl() {
var vm = this;
vm.fn = function () {
console.log(vm.inputValue);
};
};
}());

这个指令就是对输入的值做个监听,当发现值变化的时候,你需要让我做什么操作我就做什么操作咯。

ngChecked

HTML规范不允许浏览器保持boolean值属性,就像checked。(他们存在是true,不存在即为false)如果我们将一个 Angular表达式转换为这样一个属性,那么绑定的信息将会在浏览器移除这个属性的时候消失。ngChecked 指令解决了checked这个属性的问题。这个补充的指令不会被浏览器移除,并且提供一个永久可靠的地方来存储绑定的信息。

格式: ng-checked=“value”

value:表达式  结果是个boolean类型

使用代码:

  <input type="button" ng-click="isChecked = !isChecked" value="toggle" />
<input type="checkbox" ng-checked="isChecked" />

偷偷的说下,这个指令在做选择配置的时候挺有用的哦。

ngClick

ngClick指令允许当一个元素被点击后执行指定的表达式。

格式:ng-click=“value“

value:表达式

使用代码:

  <input type="button" value="add-count" ng-click="count=count+1" ng-init="count=0;" />{{count}}

鼠标单击事件,不用多说。

ngDblclick

ngDblclick指令允许你在dblclick事件上执行指定的表达式。

格式:ng-dblclick=“value”

value:表达式

使用代码:

  <input type="button" value="add-count" ng-dblclick="count=count+1" ng-init="count=0;" />{{count}}

鼠标双击事件,无需解释

Angular - - ngChange、ngChecked、ngClick、ngDblclick的更多相关文章

  1. 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据

    一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...

  2. JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

  3. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  4. Nginx 部署、反向代理配置、负载均衡

    Nginx 部署.反向代理配置.负载均衡 最近我们的angular项目部署,我们采用的的是Nginx,下面对Nginx做一个简单的介绍. 为什么选择Nginx 轻:相比于Apache,同样的web服务 ...

  5. AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

  6. 微软、谷歌、亚马逊、Facebook等硅谷大厂91个开源软件盘点(附下载地址)

    开源软件中有大量专家构建的代码,大大节省了开发人员的时间和成本,热衷于开源的大厂们总是能够带给我们新的惊喜.2016年9月GitHub报告显示,GitHub已经有超过 520 万的用户和超 30 万的 ...

  7. Google、亚马逊、微软 、阿里巴巴开源软件一览

    Google.亚马逊.微软 .阿里巴巴开源软件一览 大公司为什么要发布开源项目?一是开源能够帮助他人更快地开发软件,促进世界创新,主要是社会价值层面的考虑.二是开源能够倒逼工程师写出更好的代码.三是开 ...

  8. Vue系列(一):简介、起步、常用指令、事件和属性、模板、过滤器

    一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...

  9. Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  10. Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

随机推荐

  1. axis-运行bat报错问题

    仇玮浡说我的位置不对,我仔细一看,果然,端口号错了... 发现了 我以前用的都是8088 现在的tomcat是8080  看得到8088 没觉得奇怪.. 成功之后的样子 总结:多仔细检查配置文件,如果 ...

  2. Spring+Struts集成(第二种方案)

    在上一篇文章中我们了解到了第一种Spring跟Struts集成的方案,但此集成方案的不足是WEB层中知道Spring的相关内容,因为需要去主动的查找对象:BeanFactory.方案二便是通过依赖注入 ...

  3. OpenGL学习-------点、直线、多边形

    上一课中,我们学习了如何绘制几何图形,但大家如果多写几个程序,就会发现其实还是有些郁闷之处.例如:点太小,难以看清楚:直线也太细,不舒服:或者想画虚线,但不知道方法只能用许多短直线,甚至用点组合而成. ...

  4. Repeater嵌套gridview

    前台:<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSour ...

  5. FZU Problem 2214 Knapsack problem(背包+思维转换)

    转化思维,把价值当成背包容量,选择最小的花费,从上到下枚举,找到当这个最小的花费. #include<iostream> #include<cstring> #include& ...

  6. fragment 数据传递,传值,通信

    [原][Fragment精深系列4]Fragment与Activity之间的数据交互 2015-5-26阅读389 评论0   以下内容来自于自己的实践和网络资料的整理,希望对你有帮助. 一.Acti ...

  7. Delph组件如何使用自己的图标(转)

    源:http://blog.csdn.net/henreash/article/details/7298451

  8. CodeForces 609D Gadgets for dollars and pounds

    二分天数+验证 #include<cstdio> #include<cstring> #include<cmath> #include<algorithm&g ...

  9. jquery.elevateZoom实现仿淘宝看图片,一张小的,一张大用于鼠标经过时候显示

    实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示.然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用ele ...

  10. HDU 2498 Digits

    水题.题目这样定义的,另f(x)为x有几位,x[i]=f(x[i-1]); 求最小的i使得x[i]==x[i-1] #include<cstdio> #include<cstring ...