angularjs-双向数据绑定之输入框信息随时显示
Posted 司马懿FE技术分享
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs-双向数据绑定之输入框信息随时显示相关的知识，希望对你有一定的参考价值。
以下为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>
显示结果为：
双向数据绑定的这种方式实现了随改随时显示的功能，不需要进行繁琐的js或者js操作
以上是关于angularjs-双向数据绑定之输入框信息随时显示的主要内容，如果未能解决你的问题，请参考以下文章