Angular入门案例三 之 体验双向数据绑定

angular的双向数据绑定，个人理解是，通过model建立数据模型，那么视图上的数据就会对应存储在angular程序里，视图上的数据变化会同步到model，model的数据改变也会同步到视图。

下面的demo演示：

 1 
  2 
  3 
  4     
  5     
  6     
  7 
  8 
  9     

 10         
 11         
 12         
Hello, {{username}}!
 13     
 14 
 15 

运行结果截图如下：

程序运行后，在输入框输入文字，下面会与输入框内容同步变化。是不是很惊奇！以前需要写一大段js代码的事情（监听onchange事件，将input的value赋给下面的strong元素），现在只用一个ng-model指令就完成了。Perferct!

案例详解：

1. ng-model指令的作用：建立数据模型，在模型中对应有一个变量username用来存放input元素的value；

2. {{username}}是一个表达式，angular会自动计算该表达式，替换成相应的值。

3. 手动输入文字，input元素的value发生变化，自动同步到model的usename变量，{{username}}是从模型中读username的值，因此下面strong元素的内容跟着变了。

同步数据是angular帮我们完成的。

转载于:https://www.cnblogs.com/weir-LV/p/5981325.html