• 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入门教程之数据绑定用法示例

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

本文主要包含angularjs示例,angularjs入门与进阶,angularjs入门,angularjs入门教程,angularjs快速入门等相关知识,Rongbo_J 希望在学习及工作中可以帮助到您

本文实例讲述了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>

</div>

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

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

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

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

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

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

</div>

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

  • AngularJS折叠菜单实现方法示例
  • AngularJS使用ng-class动态增减class样式的方法示例
  • AngularJS全局警告框实现方法示例
  • AngularJS+bootstrap实现动态选择商品功能示例
  • AngularJS前端页面操作之用户修改密码功能示例
  • angularJS之$http:与服务器交互示例
  • angularjs+bootstrap菜单的使用示例代码
  • AngularJS的Filter的示例详解
  • AngularJS表格样式简单设置方法示例
  • angularjs实现下拉列表的选中事件示例

相关文章

  • 2017-05-30对Angular.js Controller如何进行单元测试
  • 2017-05-30AngularJS基础 ng-readonly 指令简单示例
  • 2017-05-30完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
  • 2017-05-30AngularJs unit-testing(单元测试)详解
  • 2017-05-30AngularJS入门教程之静态模板详解
  • 2017-05-30Angularjs 动态改变title标题(兼容ios)
  • 2017-05-30AngularJS之自定义服务详解(factory、service、provider)
  • 2017-05-30angularjs中ng-attr的用法详解
  • 2017-05-30AngularJS身份验证的方法
  • 2017-05-30AngularJS模块学习之Anchor Scroll

文章分类

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

最近更新的内容

    • AngularJS自定义指令之复制指令实现方法
    • AngularJS API之copy深拷贝详解及实例
    • angularjs 源码解析之scope
    • 解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
    • 实践中学习AngularJS表单
    • 创建你的第一个AngularJS应用的方法
    • AngularJS语法详解(续)
    • Angular中状态管理
    • AngularJS基础 ng-mouseleave 指令详解
    • 在AngularJS框架中处理数据建模的方式解析

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

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