Angularjs基础(十)
ng-blur 描述:规定blur 事件的行为 实例:当输入框失去焦点的(onblur)时执行表达式:
<input ng-blur="count = count + 1" ng-init="count=0"/>
<h1>{{count}}</h1>
定义和用法 ng-blur 指令用于告诉AngularJS HTML 元素在失去焦点时须执行的表达式。 语法:<element ng-blur="expression"></element> 参数值:值:expression 描述:失去焦点时执行的表达式。
ng-change 描述:规定在内容改变时执行的表达式。 实例:当输入框 的值改变时执行函数。
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-change="myFunc()" ng-model="myvalue">
<p>The input field has changed {{count}} times.</p>
</div>
</body>
<script>
angular.module('myApp',[])
.controller('myCtrl',['$scope',function($scope){
$scope.count =0;
$scope.myFunc = function(){
$scope.count++;
}
}])
</script>
定义和用法 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> 参数值: 值:expression 描述:元素值改变时执行表达式。
ng-checked 规定元素是否被选中 实例:选择一个或选择所有选项:
<body ng-app="">
<p>My:</p>
<input type="checkbox" ng-model="all">
<input type="checkbox" ng-checked="all">
<input type="checkbox" ng-checked="all">
<input type="checkbox" ng-checked="all">
</body>
定义和用法 ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的checked 的属性。 如果ng-checked 属性返回true ,复选框(checkbox) 或单选按钮(radio)将会被选中。 语法: <input type="checkbox | radio" ng-checked="expression"> 参数值: 值:expression 描述; 如果返回true ,将会选中元素选项。
ng-class 描述:指定HTML 元素使用的CSS 类。 实例:修改<div>元素的类:
<select ng-model="home">
<option value="sky">Sky</option>
<option value="tomato">Tomato</option>
</select>
<div ng-class="home">
<h1>Welcome Home !</h1>
<p>I like it !</p>
</div>
定义和用法 ng-class 指令用于给HTML 元素动态绑定一个或多个CSS 类。 ng-class 指令的值可以是字符串,对象,或一个数组。 如果是字符串,多个类名使用空格分隔。 如果是对象,需要使用 key-value 对,key 是一个布尔值,value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。 如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。 语法:<element> ng-class="expression"</element> 参数值: 值:expression 描述: 表达式返回一个或多个类名。
ng-class-even 描述:类似ng-class,但只在偶数行起作用。 实例:为表格的偶数行设置 class="striped":
<table>
<tr ng-repeat="x in records" ng-class-even="'striped'" >
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
定义和用法 ng-class-even 指令用于为HTML 元素动态的绑定一个或多个CSS 类,但只能为偶数行。 ng-class-even 指令需要 与ng-repeat 指令搭配使用。 ng-class-even 指令建议使用 在表格的样式渲染中,但是所有HTML 元素都是支持的。 语法 <element ng-class-even="expression"></element> 参数值:值:expression 描述: 达到指定一个或多个css 类。
ng-class-odd 类似ng-class,但只在奇数行起作用。 实例:为表格的偶数行设置 class="striped";
<table ng-controller="myCtrl">
<tr ng-repeat="x in records" ng-class-odd="'striped'" >
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
定义和用法 ng-class-odd 指令用于为HTML 元素动态的绑定一个或多个CSS 类,但只能为奇数行。 ng-class-odd 指令需要 与ng-repeat 指令搭配使用。 ng-class-odd 指令建议使用 在表格的样式渲染中,但是所有HTML 元素都是支持的。 语法:<element ng-class-odd="expression"></element> 参数值: 值: expression 描述: 表达式指定一个或多个CSS 类。
ng-click 定义元素被点击时的行为 实例:按钮没次点击时,计数变量count自动加1;
<button ng-click ="count = count + 1" ng-init="count=0">OK</button>
定义和用法 ng-click 指令告诉了AngularJS HTML 元素被点击后需要执行的操作。 语法:<element ng-click="expression"></element> 参数值: 值:expression 描述: 元素被点击后执行的表达式。
ng-cloak 在应用正要加载时防止其闪烁。 实例:页面加载时防止应用闪烁。
<div ng-app="">
<p ng-cloak>{{5 + 5}}</p>
</div>
定义和用法 ng-cloak 指令用于在AngularJS 应用在加载时防止AngularJS 代码未加载完而出现的问题。 语法: <element ng-cloak></element> 参数值: ng-clock 指令没有参数。
ng-controller 定义应用的控制器对象。 实例:为应用变量添加控制器。
<div ng-app="myApp" ng-controller="myCtrl">
Full Name:{{firstName + " " +lastName}}
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.firstName = "John";
$scope.lastName = "Doe";
})
</script>
定义和用法 ng-controller 指令用于为你的应用添加控制器。 语法:<element ng-controller="expression"></element> 参数值: 值: expression 描述: 控制器
ng-copy 描述:规定拷贝事件的行为。 实例:在输入框的文本拷贝时执行表达式
<input ng-copy="count = count + 1" ng-init="count=0" value="Copy this text">
定义和用法 ng-copy 指令用于告诉AngularJS在HTML 元素文本被拷贝时要执行的操作。 语法: <element ng-copy="expression"></element> 参数值: 值:expression 描述:元素文本被拷贝时执行的表达式。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 编程语言中的值数据类型和引用数据类型之间的区别
- c++之结构体
- c++结构体实例之按结构体中指定变量进行排序
- springboot消息之整合rabbitmq
- springboot消息之@RabbitListener和@EnableRabbit
- c++实例之通讯录管理系统之显示菜单和退出功能(一)
- c++实例之通讯录管理系统之添加联系人功能(二)
- c++实例之通讯录管理系统之显示联系人功能(三)
- c++实例之通讯录管理系统之删除联系人功能(四)
- springboot检索之Elasticsearch简介
- c++实例之通讯录管理系统之查找联系人功能(五)
- 【python-leetcode424-滑动窗口法】替换后的最长重复字符
- c++实例之通讯录管理系统之修改联系人功能(六)
- 解决arxiv.org打开pdf缓慢问题
- c++实例之通讯录管理系统之清空联系人功能(七)