AngularJS入门教程之数据绑定用法示例  更新时间:2016年11月01日 14:39:29   作者:Rongbo_J   这篇文章主要介绍了AngularJS之数据绑定用法,结合实例形式分析了AngularJS基于内置指令ng-model实现数据绑定的操作技巧,需要的朋友可以参考下 本文实例讲述了AngularJS数据绑定用法。分享给大家供大家参考,具体如下: 数据绑定是AngularJS中非常重要的特性,我们看一下下面的例子: tutorial02 用户名: 密码: 您输入的用户名:{{name}} 您输入的密码:{{pword}} 这个例子非常简单,我们先在浏览器中运行一下看看效果。 当我们在文本框中输入信息后,我们输入的信息会动态的回显到页面中。 在这个例子中我们使用到了AngularJs的另一个内置指令ng-model,它表示我们在模型数据对象($scope)中添加一个名为”name”的属性,并将它和文本框对象进行绑定。这意味着不管我们在文本框中输入什么,都会同步到这个”name”属性中,AngularJs会监听表单对象相关事件,所以回显内容会随着文本框的输入而改变。 需要注意的是ng-model只能用在表单元素标签中。 AngularJS源码可点击此处本站下载。 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: 详谈AngularJs 控制器、数据绑定、作用域 深入浅析AngularJS中的一次性数据绑定 (bindonce) AngularJS1.X学习笔记2-数据绑定详解 AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】 AngularJS入门教程之数据绑定原理详解 AngularJS 双向数据绑定详解简单实例 AngularJS实践之使用NgModelController进行数据绑定 详解JavaScript的AngularJS框架中的作用域与数据绑定 angularjs学习笔记之双向数据绑定 Angularjs中数据绑定的实例详解 AngularJS 数据绑定 相关文章 AngularJS控制器之间的数据共享及通信详解 本文详细介绍了AngularJS控制器之间的数据共享与通信,对angularjs共享数据及通信相关知识感兴趣的朋友可以一起学习。 2016-08-08 AngularJS的脏检查深入分析 这篇文章主要介绍了AngularJS的脏检查深入分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-04-04 Angular2库初探 本文将侧重点放到npm上来,看看npm平台给ng2带来的酷炫的帮助。具有很好的参考价值,下面跟着小编一起来看下吧 2017-03-03 AngularJs html compiler详解及示例代码 本文主要介绍AngularJs html compiler的知识讲解,这里整理了相关资料及相关示例代码,有兴趣的小伙伴可以参考下 2016-09-09 AngularJS基础 ng-if 指令用法 本文主要介绍了AngularJS ng-if 指令,在这里整理了一些ng-if 指令的基础资料,并有实例代码,有需要的同学可以参考下 2016-08-08 angularJs利用$scope处理升降序的方法 今天小编就为大家分享一篇angularJs利用$scope处理升降序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 Angular事件之不同组件间传递数据的方法 这篇文章主要介绍了Angular事件之不同组件间传递数据的方法,利用Angular Event在不同组件之间传递数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2018-11-11 angularjs手动识别字符串中的换行符方法 今天小编就为大家分享一篇angularjs手动识别字符串中的换行符方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 angular 用Observable实现异步调用的方法 这篇文章主要介绍了angular 用Observable实现异步调用的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-12-12 AngularJs Understanding the Model Component 本文主要介绍AngularJs Understanding the Model Component的内容,这里整理了相关资料,并详细讲解了这部分知识,有兴趣的小伙伴可以参考下 2016-09-09 最新评论

本文实例讲述了AngularJS数据绑定用法。分享给大家供大家参考,具体如下:

数据绑定是AngularJS中非常重要的特性,我们看一下下面的例子:

<!DOCTYPE html>
<html ng-app>
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial02</title>
</head>
<body>
<div>
 用户名:<input type="text" ng-model="name" placeholder="用户名"/>
 密码:<input type="password" ng-model="pword" placeholder="密码"/>
 <p>您输入的用户名:{{name}}</p>
 <p>您输入的密码:{{pword}}</p>
</div>
</body>
</html>

这个例子非常简单,我们先在浏览器中运行一下看看效果。

当我们在文本框中输入信息后,我们输入的信息会动态的回显到页面中。

在这个例子中我们使用到了AngularJs的另一个内置指令ng-model,它表示我们在模型数据对象($scope)中添加一个名为”name”的属性,并将它和文本框对象进行绑定。这意味着不管我们在文本框中输入什么,都会同步到这个”name”属性中,AngularJs会监听表单对象相关事件,所以回显内容会随着文本框的输入而改变。

需要注意的是ng-model只能用在表单元素标签中。

AngularJS源码可点击此处本站下载

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

  • 详谈AngularJs 控制器、数据绑定、作用域
  • 深入浅析AngularJS中的一次性数据绑定 (bindonce)
  • AngularJS1.X学习笔记2-数据绑定详解
  • AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
  • AngularJS入门教程之数据绑定原理详解
  • AngularJS 双向数据绑定详解简单实例
  • AngularJS实践之使用NgModelController进行数据绑定
  • 详解JavaScript的AngularJS框架中的作用域与数据绑定
  • angularjs学习笔记之双向数据绑定
  • Angularjs中数据绑定的实例详解
张贴在3