angular的双向数据绑定，个人理解是，通过model建立数据模型，那么视图上的数据就会对应存储在angular程序里，视图上的数据变化会同步到model，model的数据改变也会同步到视图。
下面的demo演示：
<!DOCTYPE html>
<html>
<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 双向数据绑定详解简单实例相关文章请关注PHP中文网！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
131
