这次我们来详细讲解angular的双向数据绑定。
一.简单的例子
这个例子我们在第一节已经展示过了,要看的移步这里
这里实现的效果就是,在输入框输入内容,下面也会相应的改变对应的内容。这就实现了数据双向绑定。
二.取值表达式与ng-bind的使用
我们再看一个例子,点击这里,文中出现的第一个例子中,{{greeting.text}}和{{text}}就是一个取值表达式了,但是如果你一直刷新页面,你会发现这样一个问题,那就是页面有时候会一瞬间的出现“{{greeting.text}} {{text}}”这个字符串,那我们该如何解决呢?
这里就用到ng-bind命令了:用于绑定数据表达式。
比如我们可以把
{{greeting.text}} {{text}}
改为:
";
这样改正之后,页面刷新就不会有不希望出现的字符串出现了。
但是使用命令总要比直接使用表达式的效率低一点,所以我们总结了一个常用规律:一般来说,index使用ng-bind,后续模版中的使用'{{}}'的形式。
三.双向绑定的典型场景-表单
先看一个form.html的内容:
<Meta charset="utf-8">