AngularJS 学习笔记

AngularJS 表达式 与 JavaScript 表达式

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的 根元素。

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。

ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了 初始值。

通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

稍后您将学习更多有关控制器和模块的知识。

ng-model 指令

ng-model 指令 绑定 HTML 元素 到应用程序数据。

ng-model 指令也可以：

• 为应用程序数据提供类型验证（number、email、required）。
• 为应用程序数据提供状态（invalid、dirty、touched、error）。
• 为 HTML 元素提供 CSS 类。
• 绑定 HTML 元素到 HTML 表单。

 

ng-repeat 指令

ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。

你可以通过以下方式来调用指令：

• 元素名　  （ 除了template 其他都不需要设置 ， ）
• 属性　　  （ 同上）
• 类名        （ 需要设置 restrict : "C"）
• 注释        （ 需要设置 restrict： "M" , replace : true ）

限制使用

你可以限制你的指令只能通过特定的方式来调用。

restrict 值可以是以下几种:

• E 作为元素名使用
• A 作为属性使用
• C 作为类名使用
• M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

验证用户输入

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址 </span>   
</form>

以上实例中，提示信息会在 ng-show 属性返回 true 的情况下显示。