AngularJS基础教程

数据绑定是 AngularJS 中一个非常重要的特性。
AngularJS 中的数据绑定是双向的，该特性能大大降低开发者在处理数据展示与数据改变时的工作量。

看看下面的例子：

在浏览器中打开该网页，在文本框中输入“Hello AngularJS”，我们会发现，当我们在文本框中输入文本时，下面的 DIV 中也会同步显示相应的文本：

这就是 AngularJS 中“数据绑定”的特性。

在这个案例中，我们给文本框加了一个指令：ng-model="name"。它使该文本框中的值（value）成为一个 Model（模型）,该 Model 的名字是“name”。

给文本框下面的 DIV 加了一个指令：ng-bind="name"。它使该 DIV 中的文本与一个 Model 绑定在一起，并且该 Model 的名字是“name”。

当一个 Model 与页面中的元素绑定后，Model 的改变将实时体现在网页上。

在上面的案例中，我们发现可以用 ng-bind 指令实现与一个 Model 的绑定，接下来我们再来看另一种实现绑定的写法。

对上面的案例稍做修改：

再次运行，在浏览器中查看。在文本框中输入“Hello AngularJS”：

我们发现，文本框下面的两个 DIV 都会实时显示我们在文本框中输入的内容。看起来下面那个 DIV 也实现了与文本框的绑定。也就是说一个 Model 是可以被多次绑定的。

看看代码。我们新增加了一个 DIV，在此 DIV 里的内容为 {{name}}。这里的 {{}} 是 AngularJS 中的一个标记，{{}} 中的写的是“name”，它正是上面文本框中定义的 Model 的名字。从结果来看，{{}} 也能实现与一个 Model 的绑定。

{{}} 不仅可以只写一个 Model 的名字，还可以写一个表达式。表达式的语法就是 Javascript 的语法。

将 {{}} 中的内容修改一下，使它成为这个样子：

在浏览器中查看：

在文本框中输入“AngularJS”：

下面那个 DIV 中输出的是“Hello AngularJS”。此时，{{}} 中的表达式实际上是：

{{}} 中可以写几乎任何符合 Javascript 语法的表达式，例如：

再次运行，在文本框中输入文本测试一下。当在文本框中输入的文本大于5个字符时，在第二个 DIV 中显示的文字将始终是“Hello TOO LONG”。

需要注意的是，{{}} 中不支持 window 对象及 window 对象下的方法和属性。在 {{}} 中，会认为所有“非常量”都是来自某个 Model，如果你这样写：

那么，AngularJS 会认为这里的“window”是一个 Model，但我们的代码中并没有定义一个名为“window”的 Model，因此并不会得到我们期望的结果。

如果我们在 ng-app 的外面加一个 {{}} 看看：

在浏览器在查看：

可以发现 {{name}} 作为一个字符串直接显示在了网页上。也就是说，AngularJS对没有对它进行处理。

在上一章节我们学过，ng-app="" 会告诉 AngularJS 应该对 DOM 的哪部分进行管理，AngularJS 不会对 ng-app="" 之外的 DOM 进行处理。

可以用 ng-init 指令设置 Model 的初始值：

在浏览器在查看：

我们并没有在文本框中输入任何值，但文本框中已经有了“Hello”，并且后面的两个 DIV 中也有“Hello”。这是因为我们用 ng-init 给 name 设了一个初始值。

如果在多个 ng-init 中同时给同一个 Model 设了初始值，则后面的设置会覆盖前面的设置：

在浏览器中查看：

还可以同时初始化多个值。我们将代码修改一下：

在浏览器中查看：

在这个案例中，我们同时给 firstName 和 lastName 设了初始值。在一个 ng-init 中，多个初始值之间用英文逗号（;）分隔。

也可以将多个初始值分开写：

AngularJS 允许你将 ng-init 写在 ng-app 范围内的任何地方，但我建议你将其写在 ng-app 的标签上、或定义该 Model 的标签上：

若你觉得此文不错，请分享，若认为尚需改进，请点讚。

“数据绑定”是 AngularJS 的一个重要特性，需要好好掌握并灵活应用。
在前面我们说 AngularJS 的数据绑定是双向的，但在本章的案例中我们并没有体现出“双向绑定”的特性，这是因为有些知识点我们还没有学到，在后面的案例中将会体现出来。
AngularJS基础教程 - 目录

关于我：google.com/+YFCAO
由nooong.com提供空间支援。