这次我们来详细讲解angular的双向数据绑定。
一.简单的例子
这个例子我们在第一节已经展示过了,要看的移步这里
这里实现的效果就是,在输入框输入内容,下面也会相应的改变对应的内容。这就实现了数据双向绑定。
二.取值表达式与ng-bind的使用
我们再看一个例子,点击这里,文中出现的第一个例子中,{{greeting.text}}和{{text}}就是一个取值表达式了,但是如果你一直刷新页面,你会发现这样一个问题,那就是页面有时候会一瞬间的出现“{{greeting.text}} {{text}}”这个字符串,那我们该如何解决呢?
这里就用到ng-bind命令了:用于绑定数据表达式。
比如我们可以把
rush:xhtml;">
{{greeting.text}} {{text}}
改为:
rush:js;">
"
";
这样改正之后,页面刷新就不会有不希望出现的字符串出现了。
但是使用命令总要比直接使用表达式的效率低一点,所以我们总结了一个常用规律:一般来说,index使用ng-bind,后续模版中的使用'{{}}'的形式。
三.双向绑定的典型场景-表单
rush:xhtml;">
<Meta charset="utf-8">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。