Angular - - ngChange、ngChecked、ngClick、ngDblclick
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的更多相关文章
- 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据
一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...
- JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- Nginx 部署、反向代理配置、负载均衡
Nginx 部署.反向代理配置.负载均衡 最近我们的angular项目部署,我们采用的的是Nginx,下面对Nginx做一个简单的介绍. 为什么选择Nginx 轻:相比于Apache,同样的web服务 ...
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...
- 微软、谷歌、亚马逊、Facebook等硅谷大厂91个开源软件盘点(附下载地址)
开源软件中有大量专家构建的代码,大大节省了开发人员的时间和成本,热衷于开源的大厂们总是能够带给我们新的惊喜.2016年9月GitHub报告显示,GitHub已经有超过 520 万的用户和超 30 万的 ...
- Google、亚马逊、微软 、阿里巴巴开源软件一览
Google.亚马逊.微软 .阿里巴巴开源软件一览 大公司为什么要发布开源项目?一是开源能够帮助他人更快地开发软件,促进世界创新,主要是社会价值层面的考虑.二是开源能够倒逼工程师写出更好的代码.三是开 ...
- Vue系列(一):简介、起步、常用指令、事件和属性、模板、过滤器
一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...
- Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- 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.数据驱动.双向绑定 ...
随机推荐
- 词链(link)
词链(link) 题目描述 给定一个仅包含小写字母的英文单词表,其中每个单词最多包含50个字母.如果一张由一个词或多个词组成的表中,每个单词(除了最后一个)都是排在它后面的单词的前缀,则称此表为一个词 ...
- 原创:LoadTest系列之Insert Condition
当脚本中的部分内容需要满足某些条件后才执行时,则可以使用Insert Condition,例如有如下操作: 操作1:登录 操作2:添加一条数据: 在这两个操作中,只有操作1成功后,操作2才有意义,这时 ...
- PAT (Advanced Level) 1042. Shuffling Machine (20)
简单题. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...
- 需要注意的subList方法!和substring是不一样的!从源码解释他们的不同。
很多时候我们截取字符串用的是substring方法,很自然用着,但是对于列表的截取时很多时候就用得很少,但是其实他们是很不一样的,具体哪里不一样呢? package main; import java ...
- PS2鼠标+LCD12864实验(调试未成功)
此试验我一人调试许久都未成功,但发送ff时,读出来的数据确是对的,一开始让我窃喜,但发送f4时,读出来的数据确是错的,哎让苦恼啊,能力有限,只能先暂时就这样吧,那位什么还要贴出来呢,有两个原因: 1. ...
- Android Quick Tip - ADB over WiFi
http://stuffandtech.blogspot.jp/2012/03/android-quick-tip-adb-over-wifi.html MAR 26 Android Quick ...
- nexus 中央仓库
nexus 中央仓库 下载地址:http://www.sonatype.org/nexus/archived 下载最新版本 mkdir -p /opt/local/nexus tar zxvf nex ...
- Apache处理请求步骤及过程
Apache请求处理循环详解 : 1.Post-Read-Request阶段: 在正常请求处理流程中,这是模块可以插入钩子的第一个阶段.对于那些想很早进入处理请求的模块来说,这个阶段可以被利用. 2. ...
- (简单) FZU 1686 神龙的难题 , DLX+可重复覆盖。
Description 这是个剑与魔法的世界.英雄和魔物同在,动荡和安定并存.但总的来说,库尔特王国是个安宁的国家,人民安居乐业,魔物也比较少.但是.总有一些魔物不时会进入城市附近,干扰人民的生活.就 ...
- Unity3D中的函数方法及解释
一.刷新函数 Update 当MonoBehaviour启用时,其Update在每一帧被调用. LateUpdate 当Behaviour启用时,其LateUpdate在每一帧被调用. FixedUp ...