本文共 4050 字，大约阅读时间需要 13 分钟。
AngularJS ---诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。版本地址：https://code.angularjs.org/
Directive (ng内置的指令)
(注：HTML5规范要求所有的用户自定义属性以"data-“开头，所以data-是符合HTML5规范的写法)
#####1、data-ng-app=”" ;参数值可选：指定载应用模块的名称 1)data-ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。 2)所有 AngularJS 应用都必须要要一个根元素。 3)HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用#####2、ng-init="" ;参数值为指定要执行的变量或表达式。初始化应用时执行指定表达式创建一个变量
{ {myText}}
#####3、ng-bind="" ;参数为指定要执行的变量或表达式。
#####4、ng-model="" ;参数为表单域的属性名。指令绑定了 HTML 表单元素到 scope 变量中。如果 scope 中不存在变量, 将会创建它
#####5、ng-class="" ; 参数为表达式返回一个或多个类名。可以是字符串，对象，或一个数组, key-value 对,key为布尔值
Welcome Home!
I like it!
#####6、ng-controller="" ; 参数为控制器的名称，指令用于为你的应用添加控制器
#####7、ng-hide="" ; 参数为布尔值，指令在表达式为 true 时隐藏 HTML 元素 #####8、ng-href="" ; 参数为字符串，表达式的执行结果。指令覆盖了原生的 a元素 href 属性。如果在 href 的值中有 AngularJS 代码，则需要使用 ng-href 而不是 href。ng-href 指令确保了链接是正常的，即使在 AngularJS 执行代码前点击链接。AngularJS中文网
访问 { {myVar}}学习!
#####7、ng-if="" ; 参数为布尔值，指令用于在表达式为 false 时移除 HTML 元素。如果 if 语句执行的结果为 true，会添加移除元素，并显示。ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。
Welcome
#####8、ng-include=""; 参数为可以是一个表达式，返回一个文件名。指令用于包含外部的 HTML 文件。包含的内容将作为指定元素的子节点。默认情况下，包含的文件需要包含在同一个域名下。
#####9、ng-list="" ; 参数为定义分隔符，默认是逗号分隔。指令将字符串转换为数组，并使用逗号分隔。ng-list 指令还有另外一种转换方式，如果你有字符串数组希望在输入框中显示，你可以在 input 上使用 ng-list 指令。
{ {customers}}// output为输入框中的字符组成的数组
#####10、ng-non-bindable ; 无参数值，告知AngularJS无需编译该元素或其子元素
#####11、ng-repeat="" ; 该指令为集合中的每项都实例化一个模块 循环中的特殊变量，包括： $index —number 当前索引值。 $first —boolean 当循环的对象存在第一项时为true。 $middle—boolean 当循环的对象存在中间项时为true。 $last —boolean 当循环对象存在最后一项时为true。 $even —boolean 循环的对象在当前位置的"$index"(索引)是偶数则为true，否则为false。 $odd —boolean 循环的对象在当前位置的"$index"(索引)是奇数则为true，否则为false。I have { {friends.length}} friends. They are:
- [{ {$index + 1}}] { {friend.name}} who is { {friend.age}} years old.
- No results found...
#####12、ng-show="" ; 如果表达式为 true 则显示指定的 HTML 元素。
Welcome
#####13、ng-src="" ; 指令覆盖了 元素的 src 属性。如果你使用了 AngularJS 代码设置图片地址，请使用 ng-src 指令替代 src 属性。ng-src 指令确保的 AngularJS 代码执行前不显示图片。
#####14、ng-style="" ; 指令为 HTML 元素添加 style 属性。ng-style 属性值必须是对象，表达式返回的也是对象。对象由 CSS 属性和值注册，即 key=>value 对。
菜鸟教程
15、ng-switch = “” ; 指令根据表达式显示或隐藏对应的部分。
对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。 可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。菜鸟教程
欢迎访问菜鸟教程
欢迎访问Google
淘宝
欢迎访问淘宝
切换
选择不同选项显示对应的值。
16、ng-options = “” ；----以下的用法
注意：ng-modal= “” 的值绑定应该是字符串类型，否则会出现空的option//对于数组： label for value in array select as label for value in array label group by group for value in array label disable when disable for value in array label group by group for value in array track by trackexpr label disable when disable for value in array track by trackexpr label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by) //对于对象： label for (key , value) in object select as label for (key ,value) in object label group by group for (key,value) in object label disable when disable for (key, value) in object select as label group by group for(key, value) in object//例子：
Angular 使用的CSS类
ng-scope —用法: angular把这个类附加到所有创建了新作用域(Scope)的HTML元素上。 ng-binding—用法: angular把这个类附加到所有通过 ng-bind 或 绑定了任何数据的元素上。 ng-invalid, ng-valid —用法: angular把这个类附加到进行了验证操作的所有input组件元素上。 ng-pristine, ng-dirty —用法: angular的input指令给所有新的、还没有与用户交互的input元素附加上ng-pristine类，当用户有任何输入时，则附加上 ng-dirty.转载地址：https://blog.csdn.net/snow51/article/details/81028640 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
