• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS 双向数据绑定详解简单实例

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs 详解,angularjs 路由详解,angularjs双向绑定,angularjs数据绑定,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>
</div>

运行结果:程序运行后,在输入框输入文字,下面会与输入框内容同步变化。是不是很惊奇!以前需要写一大段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帮我们完成的。

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

</div>

您可能想查找下面的文章:

  • 详解angularjs利用ui-route异步加载组件
  • 详解AngularJS controller调用factory
  • 详解angularJs模块ui-router之状态嵌套和视图嵌套
  • 详解AngularJs ui-router 路由的简单介绍
  • 详解AngularJS ui-sref的简单使用
  • 详解在Angularjs中ui-sref和$state.go如何传递参数
  • angularjs中的$eval方法详解
  • AngularJS双向绑定和依赖反转实例详解
  • 详解angularJs指令的3种绑定策略
  • 详解AngularJs HTTP响应拦截器实现登陆、权限校验

相关文章

  • 2017-05-30angularjs学习笔记之双向数据绑定
  • 2017-05-30AngularJS入门教程之AngularJS指令
  • 2017-05-30AngularJS中监视Scope变量以及外部调用Scope方法
  • 2017-05-30AngularJS出现$http异步后台无法获取请求参数问题的解决方法
  • 2017-05-30AngularJS中的DOM操作用法分析
  • 2017-05-30AngularJS入门教程之静态模板详解
  • 2017-05-30Angular2使用Augury来调试Angular2程序
  • 2017-05-30AngularJS控制器controller正确的通信的方法
  • 2017-05-30深入理解node exports和module.exports区别
  • 2017-05-30Angular2表单自定义验证器的实现

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Angular2开发——组件规划篇
    • AngularJS 文件上传控件 ng-file-upload详解
    • AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
    • AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
    • AngularJS中isolate scope的用法分析
    • Angular开发者指南之入门介绍
    • Angular中的Promise对象($q介绍)
    • AngularJS 入门教程之HTML DOM实例详解
    • Angular ng-class详解及实例代码
    • AngularJS ng-controller 指令简单实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有