Angular - - ngChange、ngChecked、ngClick、ngDblclick
2015-12-17 14:06
609 查看
ngChange
当用户更改输入时,执行给定的表达式。表达式是立即进行执行的,这个和javascript的onChange事件的只有在触发事件的变化结束的时候执行不同。
格式:ng-change=”value”
value: 表达式。
使用代码:
这个指令就是对输入的值做个监听,当发现值变化的时候,你需要让我做什么操作我就做什么操作咯。
ngChecked
HTML规范不允许浏览器保持boolean值属性,就像checked。(他们存在是true,不存在即为false)如果我们将一个 Angular表达式转换为这样一个属性,那么绑定的信息将会在浏览器移除这个属性的时候消失。ngChecked 指令解决了checked这个属性的问题。这个补充的指令不会被浏览器移除,并且提供一个永久可靠的地方来存储绑定的信息。
格式: ng-checked=“value”
value:表达式 结果是个boolean类型
使用代码:
偷偷的说下,这个指令在做选择配置的时候挺有用的哦。
ngClick
ngClick指令允许当一个元素被点击后执行指定的表达式。
格式:ng-click=“value“
value:表达式
使用代码:
鼠标单击事件,不用多说。
ngDblclick
ngDblclick指令允许你在dblclick事件上执行指定的表达式。
格式:ng-dblclick=“value”
value:表达式
使用代码:
鼠标双击事件,无需解释
当用户更改输入时,执行给定的表达式。表达式是立即进行执行的,这个和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}}
鼠标双击事件,无需解释
相关文章推荐
- Grunt搭建AngularJS项目
- Angularjs Controller间通信的几种方法
- Angular - - angular.injector、angular.module
- Angular - - Angular数据类型判断
- Angular - - angular.element
- Angular 框架将进入 2.0 时代
- Angular - - angular.equals
- Angular - - angular.forEach、angular.extend
- angularjs+requirejs按需加载
- Angular - - $anchorScroll、$controller、$document
- Angular - - $interval 和 $timeout
- Angular - - $animate
- Angular - - $interpolate 和 $parse
- Angular - - $location 和 $window
- Angular - - $q 承诺与延迟
- Angular - - $sce 和 $sceDelegate
- Angular - - filter 过滤器
- Angular - - $resource 更高端的数据交互
- Angular - - ngRoute Angular自带的路由
- Angular Cookies 操作