AngularJs中用到的相关指令总结

阅读() @2018-01-07 22:20:25

AngularJs中用到的相关指令总结(陆续更新中):

1、ng-app指令:

告诉 AngularJS 应用当前这个元素是根元素。所有AngularJS应用都必须要要一个根元素。HTML文档中只允许有一个ng-app指令,如果有多个 ng-app 指令,则只有第一个会被使用,它的值是指定载应用模块的名称。

2、ng-controller指令:

用于为你的应用添加控制器。在控制器中,你可以编写代码,制作函数和变量,并使用scope对象来访问。

3、ng-model指令:

绑定了HTML表单元素到scope变量中。如果scope中不存在变量, 将会创建它。一般是用在input表单中改变value值用做双向数据绑定。

4、ng-bind指令:

告诉AngularJS使用给定的变量或表达式的值来替换HTML元素的内容。如果给定的变量或表达式修改了,指定替换的HTML元素也会修改。

以上4个指令的初次使用场景: AngularJs简介、指令、表达式及其作用

5、ng-click指令:

告诉AngularJS,HTML元素被点击后需要执行的操作。

实例:AngularJS中$scope的基本使用方法

6、ng-cloak指令:

用于在AngularJS应用在加载时防止AngularJS代码未加载完而出现的问题。

AngularJS应用在加载时,文档可能会由于AngularJS代码未加载完而出现显示AngularJS代码,进而会有闪烁的效果,ng-cloak指令是为了防止该问题的发生。

实例:AngularJs表达式与ng-bind及ng-cloak解决闪屏问题解决方案

7、ng-value指令:

用于设置input 或select元素的 value 属性。

8、ng-show指令:

在表达式为true时显示指定的HTML元素,否则隐藏指定的HTML元素。

9、ng-true-value和ng-false-value指令:

可以自定义checkbox被选中或取消选中之后的value值,ng-true-value表示选中之后的value值,ng-false-value表示取消选中之后的value值。

10、ng-options指令:

循环读取scope对象中的json数据,将其逐条返回到select中的option。

实例:AngularJs中的双向向数据绑定(MVVM)与表单处理相关指令

11、ng-selected指令:

用于设置 <select> 列表中的 <option> 元素的 selected 属性。ng-selected 属性的表达式返回 true 则选项被选中。

<!-- ng-selected 如果为true,则option被选中 -->
<select>
	<option>请选择</option>
	<option ng-value="user.sex" ng-selected="user.sex==1">男</option>
	<option ng-value="user.sex" ng-selected="user.sex==2">女</option>
</select>
<input type="radio" name="sex" ng-model="user.sex" ng-value="1" />男
<input type="radio" name="sex" ng-model="user.sex" ng-value="2" />女
var m = angular.module('app', []);
	m.controller('ctrl', ['$scope', function($scope){
		$scope.user = {'sex':1};
	}]);

12、ng-disabled指令:

设置表单输入字段的 disabled 属性(input, select, 或 textarea)。如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。

<!-- ng-disabled 如果为true,则不可编辑且置灰 -->
<input type="checkbox" ng-model="copyright" />
<input type="submit" ng-disabled="!copyright" />

13、ng-readonly指令:

用于设置表单域(input 或 textarea) 的 readonly 属性。如果 ng-readonly 属性的表达式返回 true 则表单域为只读。

<!-- ng-readonly 如果为true,则是只读,不可编辑 -->
<input type="text" ng-readonly="user.sex" />
<input type="text" ng-disabled="user.sex" />

14、ng-model-options指令:

绑定了 HTML 表单元素到 scope 变量中,你可以指定绑定数据触发的时间,或者指定等待多少毫秒。

实例:AngularJs使用ng-model-options设置数据同步时机提高网站性能

15、ng-checked指令:

用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。如果 ng-checked 属性返回 true,复选框(checkbox)或单选按钮(radio)将会被选中。

实例:AngularJs使用ng-checked一步实现全选或取消功能

16、ng-class指令:、

用于给 HTML 元素动态绑定一个或多个 CSS 类。ng-class 指令的值可以是字符串,对象,或一个数组。

如果是字符串,多个类名使用空格分隔;

如果是对象,需要使用 key-value 对,key 为你想要添加的类名,value 是一个布尔值。只有在 value 为 true 时类才会被添加;

如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。

实例:AngularJs通过ng-class动态改变样式类实例操作

17、ng-style指令:

为 HTML 元素添加 style 属性。ng-style 属性值必须是对象,表达式返回的也是对象。对象由 CSS 属性和值注册,即 key=>value 对。

实例:AngularJS使用ng-style动态改变样式

18、事件指令总结:

实例:AngularJs的事件处理指令详解

持续更新中!

微信二维码