angularjs-双向数据绑定之输入框信息随时显示

最新推荐文章于 2025-09-08 17:59:21 发布

weixin_30614109

最新推荐文章于 2025-09-08 17:59:21 发布

阅读量196

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bellagao/p/6274391.html

本文介绍了AngularJS中双向数据绑定的两种实现方式：使用ng-bind指令和双大括号表达式。通过实例展示了如何实时更新用户输入的数据。

以下为angularjs 双向数据绑定用处之一：用户输入框输入信息，随着用户信息的输入，信息随时显示在某元素中

双向数据绑定如果不需要对输入数据有任何操作，只是把用户输入的信息显示在页面中，则不需要对<div ng-app=''>里面写任何任内，只需要谢伟空字符即可；一个为用户输入信息元素绑定ng-model='起的名字'，显示元素为绑定方式为以下两种方式都可实现

方式一：ng-bind='名字'

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>双向数据绑定两种方式</title>
    <script src="angular.js"></script>
</head>
<body >
<div ng-app="">
    <input type="text" ng-model="name"/>
    <h3>以下为ng-bind方式</h3>
    <div ng-bind="name"></div>  <!--ng-bind方式-->
</div>
</body>
</html>
方式二：花括号形式 {{名字}}
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>双向数据绑定两种方式</title>
    <script src="angular.js"></script>
</head>
<body >
<div ng-app="">
    <input type="text" ng-model="name"/>
    <h3>以下为花括号方式</h3>
　　<div>{{name}}</div>  <!--花括号方式-->
</div>
</body>
</html>

显示结果为：