AngularJS 双向数据绑定详解简单实例
更新时间：2016年10月20日 16:24:41 投稿：lqh
这篇文章主要介绍了AngularJS 双向数据绑定详解简单实例的相关资料,需要的朋友可以参考下
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>
<!-- ng-model指令将表单的value绑定到model的username变量-->
<input ng-model="username" type="text" placeholder="请输入...">
<p>Hello, <strong>{{username}}</strong>!</p>
</div>
</body>
</html>
运行结果：程序运行后，在输入框输入文字，下面会与输入框内容同步变化。是不是很惊奇！以前需要写一大段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帮我们完成的。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
详解angularjs获取元素以及angular.element()用法
本篇文章主要介绍了详解angularjs获取元素以及angular.element()用法 ，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
本文的主要是演示 Template-driven 中，一些常用控件的使用方式，仅供参考。具体请根据实际业务需求做相应调整。2017-06-06
angularJS+requireJS实现controller及directive的按需加载示例
本篇文章主要介绍了angularJS+requireJS实现controller及directive的按需加载示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
AngularJS 与Bootstrap实现表格分页实例代码
这篇文章主要介绍了AngularJS 与Bootstrap实现表格分页的相关资料,并附实例代码和实现效果图，需要的朋友可以参考下2016-10-10
AngularJS中数据绑定相信大家应该都不陌生了,这篇文章主要给大家介绍了关于angular多选表单数据绑定的简单尝试,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
本文主要介绍 AngularJS Service,这里整理了AngularJS Servic的详细资料,并提供代码实例,有需要的小伙伴可以参考下2016-07-07
Angular 通过注入 $location 获取与修改当前页面URL的实例
这篇文章主要介绍了Angular 通过注入 $location 获取与修改当前页面URL的实例代码,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了Angular封装搜索框组件操作,结合实例形式分析了基于Angular组件库实现搜索功能的封装操作相关实现步骤与注意事项,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了 AngularJS 所有版本下载地址的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了浅谈AngularJS中使用$resource（已更新）的相关资料,需要的朋友可以参考下2017-09-09
最新评论