源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-03-15 11:49 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要: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! [img]http://files.jb51.net/file_images/article/201610/20161020162446602.png?2016920162459[/img] 案例详解: 1. ng-model指令的作用:建立数据模型,在模型中对应有一个变量username用来存放input元素的value; 2. {{username}}是一个表达式,angular会自动计算该表达式,替换成相应的值。 3. 手动输入文字,input元素的value发生变化,自动同步到model的usename变量,{{username}}是从模型中读username的值,因此下面strong元素的内容跟着变了。 同步数据是angular帮我们完成的。 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部