angularjs学习笔记之双向数据绑定

前端之家收集整理的这篇文章主要介绍了angularjs学习笔记之双向数据绑定前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这次我们来详细讲解angular的双向数据绑定。

一.简单的例子

这个例子我们在第一节已经展示过了,要看的移步这里

这里实现的效果就是,在输入框输入内容,下面也会相应的改变对应的内容。这就实现了数据双向绑定。

二.取值表达式与ng-bind的使用

我们再看一个例子,点击这里,文中出现的第一个例子中,{{greeting.text}}和{{text}}就是一个取值表达式了,但是如果你一直刷新页面,你会发现这样一个问题,那就是页面有时候会一瞬间的出现“{{greeting.text}} {{text}}”这个字符串,那我们该如何解决呢?

这里就用到ng-bind命令了:用于绑定数据表达式。

比如我们可以把

{{greeting.text}} {{text}}

改为:

";

  这样改正之后,页面刷新就不会有不希望出现的字符串出现了。

  但是使用命令总要比直接使用表达式的效率低一点,所以我们总结了一个常用规律:一般来说,index使用ng-bind,后续模版中的使用'{{}}'的形式。

三.双向绑定的典型场景-表单

  先看一个form.html的内容

<Meta charset="utf-8">

猜你在找的JavaScript相关文章