AngularJS  双向数据绑定详解简单实例  更新时间:2016年10月20日 16:24:41   投稿:lqh   这篇文章主要介绍了AngularJS 双向数据绑定详解简单实例的相关资料,需要的朋友可以参考下 angular的双向数据绑定,个人理解是,通过model建立数据模型,那么视图上的数据就会对应存储在angular程序里,视图上的数据变化会同步到model,model的数据改变也会同步到视图。 下面的demo演示: hello, AngularJS! Hello, {{username}}! 运行结果:程序运行后,在输入框输入文字,下面会与输入框内容同步变化。是不是很惊奇!以前需要写一大段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帮我们完成的。 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! 您可能感兴趣的文章: javascript实现数据双向绑定的三种方式小结 AngularJS学习笔记(三)数据双向绑定的简单实例 JS原生数据双向绑定实现代码 Angular JS数据的双向绑定详解及实例 JavaScript中双向数据绑定详解 jQuery实现html双向绑定功能示例 js最简单的双向绑定实例讲解 AngularJS 双向数据绑定 相关文章 AngularJS ng-template寄宿方式用法分析 这篇文章主要介绍了AngularJS ng-template寄宿方式用法,结合实例形式分析了ng-template模板的相关使用技巧,需要的朋友可以参考下 2016-11-11 AngularJs 延时器、计时器实例代码 这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下 2017-09-09 angularjs1.5 组件内用函数向外传值的实例 今天小编就为大家分享一篇angularjs1.5 组件内用函数向外传值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 详解Angular 4.x 动态创建组件 本篇文章主要介绍了详解Angular 4.x 动态创建组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-04-04 Angular4 ElementRef的应用 本篇文章主要介绍了Angular4 ElementRef的应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-02-02 Angularjs的键盘事件的绑定 这篇文章主要介绍了Angularjs的键盘事件的绑定的相关资料,这里提供了两种方法,1.ng内置指令,2.自定义指令,并进行比较,需要的朋友可以参考下 2017-07-07 使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法 这篇文章主要介绍了使用 Github Actions 自动部署 Angular 应用到 Github Pages,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 2020-07-07 Angular CLI发布路径的配置项浅析 这篇文章主要给大家介绍了关于Angular CLI发布路径的配置项的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2021-03-03 AngularJS入门教程之学习环境搭建 这篇文章主要介绍了AngularJS入门教程之学习环境搭建,本教程将指导您完成一个简单的应用程序创建过程,包括编写和运行单元测试、不断地测试应用,需要的朋友可以参考下 2014-12-12 Angularjs 根据一个select的值去设置另一个select的值方法 今天小编就为大家分享一篇Angularjs 根据一个select的值去设置另一个select的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 最新评论

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帮我们完成的。

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

您可能感兴趣的文章:

  • javascript实现数据双向绑定的三种方式小结
  • AngularJS学习笔记(三)数据双向绑定的简单实例
  • JS原生数据双向绑定实现代码
  • Angular JS数据的双向绑定详解及实例
  • JavaScript中双向数据绑定详解
  • jQuery实现html双向绑定功能示例
  • js最简单的双向绑定实例讲解
张贴在3