AngularJs_CheatSheet.md

指令

ng-app

定义AnglarJS应用程序

ng-bind

绑定应用程序表达式数据、模型数据(text)到HTML元素。

ng-bind-html

以安全方式绑定应用程序表达式数据、模型数据(html)到HTML元素。会去除危险代码，只留下标签以及标签里的值。使用ng-bind-html需要引入ngSanitize模块(angular-sanitize.js) var app = angular.module('myApp', ['ngSanitize']); app.controller('UserController', function($scope, $sce) { // ng-bind-html节点 使用$sanitize服务自动编译如下内容 $scope.custHtml = '

' + '' + '

';

// $sce为内置服务，使用$sce服务的trustAsHtml编译原始内容 $scope.trustHtml = $sce.trustAsHtml($scope.custHtml); });

ng-bind-template

用表达式的值填充HTML元素.

ng-checked

设置checked属性。expression 返回 true 时，元素被选中。

ng-class

设置元素class属性。expression可以是字符串、对象、数组。对象的 key 是 boolean 值，当对象的 key 为 true，value会添加到 class 属性；数组元素可以是字符串或对象

ng-class-even

设置偶数行元素class属性。

ng-class-odd

设置奇数行元素class属性。

ng-cloak

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

{{ username }}

当AngularJS 代码未加载完成时，加载上述代码时可能在页面显示 {{ username }} 表达式，等代码加载完成后，页面内容又更改为 username 实际内容，给客户造成页面闪烁效果。使用 ng-cloak 指令可以防止闪烁发生。

ng-controller

定义元素的控制器对象

ng-csp

修改 AngularJS 中关于 eval 的行为方式及内联样式

ng-disabled

元素是否禁用

ng-form

ng-hide

是否隐藏元素

ng-href

设定 a 标签链接

ng-if

如果条件为false，移除HTML元素

ng-include

包含 html 文件

ng-init

定义初始化值

ng-jq

定义应用中必须使用到的库， 如：jQuery

ng-list

文本和数组相互转换。separator 默认为逗号

ng-model

绑定 model 数据

ng-model-options

指定绑定数据到 model 的触发条件。 {{ name }} 当input组件失去焦点时，{{ name }} 表达式的值才会更新为组件中的值

ng-non-bindable

元素或子元素不能绑定数据。原样显示表达式。

{{ name }}

ng-open

设置 detail 标签的 open 属性。少数浏览器支持

title or explanatory caption

content

>

ng-options

设置 select 组件的 options

ng-pluralize

根据本地化规则显示信息

ng-readonly

设置指定元素的 readonly 属性

ng-repeat

定义集合数据的模板

ng-selected

设置元素的 selected 属性.很少用，直接让 select 组件绑定 model

ng-show

是否显示原色

ng-src

指定 img 元素的 src属性。确保 AngularJS 代码执行前不显示图片，要不然如下代码可能会显示值为 {{ expression }} 的图片站位，而不是 expression 求值后的 url 地址。

ng-srcset

指定 img 元素的 srcset 属性。确保 AngularJS代码执行前不显示图片。

ng-style

设置元素的 style 属性

ng-switch

规定显示或隐藏子元素的条件。注意和 ng-show ng-hide 的区别 www.google.com www.facebook.com

google site

facebook site

default site

ng-transclude

规定填充的目标位置

ng-value

设置 input 元素的值。不(双向)绑定到 model。

ng-blur

blur 事件。失去焦点时需要执行的表达式

ng-focus

focus 事件。获得焦点时需要执行的表达式

ng-change

元素内容改变时需要执行的表达式

ng-click

元素点击时需要执行的表达式

ng-copy

copy元素内容时，需要执行的表达式

ng-cut

剪切事件

ng-dblclick

ng-keydown ng-keypress ng-keyup ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup

ng-paste

粘贴事件

ng-submit

过滤器

AngularJS 自带的过滤器包括：currency, filter:"expression", lowercase, uppercase orerBy:"expression"

验证属性

AngularJs验证属性包括 $dirty, $invalid, $error.
$dirty 表示输入数据已改变
$invalid 表示输入数据不符合验证规则
$error 包含具体的验证错误信息