JavaScript强化教程——AngularJS 指令

CrazyDogWang 2016-07-22

本文为H5EDU机构官方HTML5培训

AngularJS通过被称为指令的新属性来扩展HTML。

AngularJS通过内置的指令来为应用添加功能。

AngularJS允许你自定义指令。

AngularJS指令

AngularJS指令是扩展的HTML属性,带有前缀ng-。

ng-app指令初始化一个AngularJS应用程序。

ng-init指令初始化应用程序数据。

ng-model指令把元素值(比如输入域的值)绑定到应用程序。

完整的指令内容可以参阅AngularJS参考手册。

AngularJS实例

<divng-app=""ng-init="firstName='John'">

<p>在输入框中尝试输入:</p>

<p>姓名:<inputtype="text"ng-model="firstName"></p>

<p>你输入的为:{{firstName}}</p>

</div>

教程,主要介绍:JavaScript强化教程——AngularJS指令

ng-app指令告诉AngularJS,<div>元素是AngularJS应用程序的"所有者"。

Note一个网页可以包含多个运行在不同元素中的AngularJS应用程序。

数据绑定

上面实例中的{{firstName}}表达式是一个AngularJS数据绑定表达式。

AngularJS中的数据绑定,同步了AngularJS表达式与AngularJS数据。

{{firstName}}是通过ng-model="firstName"进行同步。

在下一个实例中,两个文本域是通过两个ng-model指令同步的:

AngularJS实例

<divng-app=""ng-init="quantity=1;price=5">

<h2>价格计算器</h2>

数量:<inputtype="number"ng-model="quantity">

价格:<inputtype="number"ng-model="price">

<p><b>总价:</b>{{quantity*price}}</p>

</div>

相关推荐