手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >AngularJS 双向数据绑定详解简单实例
AngularJS 双向数据绑定详解简单实例
摘要:angular的双向数据绑定,个人理解是,通过model建立数据模型,那么视图上的数据就会对应存储在angular程序里,视图上的数据变化会...

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

下面的demo演示:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello, AngularJS!</title> <script src="angular.js"></script> </head> <body> <div ng-app> <> <input ng-model="username" type="text" placeholder="请输入..."> <p>Hello, <strong>{{username}}</strong>!</p> </div> </body> </html>

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

AngularJS  双向数据绑定详解简单实例1

案例详解:

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

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

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

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

【AngularJS 双向数据绑定详解简单实例】相关文章:

JavaScript中isPrototypeOf函数作用和使用实例

AngularJS中$interval的用法详解

jquery使用each方法遍历json格式数据实例

详解AngularJS中$http缓存以及处理多个$http请求的方法

js实现简单div拖拽功能实例

JavaScript数据结构与算法之链表

jQuery插件制作之参数用法实例分析

jQuery 遍历函数详解

JavaScript function函数种类详解

实例剖析AngularJS框架中数据的双向绑定运用

精品推荐
分类导航