1.功能
实现数据绑定,将用户在文本框中输入的内容实时显示在页面上。
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS输入框数据绑定</title>
</head>
<body>
<div ng-app="">
<p>在输入框中尝试输入:</p>
<p>
姓名:<input type="text" ng-model="name">
</p>
<p ng-bind="name"></p>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</body>
</html>
3.说明
只要具备最基本的HTML语法基础,就能看懂上边代码的意思。对于引入的<script>和ng-*暂时不理解也没关系,先会用即可。就像每个人写第一个HelloWorld程序一样,先跑起来再说,至于其原理随着以后深入学习,自然就理解了。
这里简单说一下:
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。