您的位置：首页 > Web前端 > AngularJS

AngularJS—实时获取输入的文本

2016-12-10 16:31 239 查看

先看一下效果：

这次我们通过一个小实例来简单的学习一下Angular Js的使用。本次例子主要是获取我们输入的文本，并在输入框下边实时显示出来。实现起来非常简单。

第一步：导入Angular Js脚本文件。

导入脚本方式有两种，可以使用 Google CDN 服务器提供的文件，也可以使用自己本地的脚本文件，这里我们使用本地的。

<script src="../libs/angular.min.js"></script>

第二步：使用Angular Js。

先贴出这次例子的代码，不需要使用任何别的javascript文件，只需要Angular JS脚本，并直接在html文件中使用即可。

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>初次接触Angular</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="../libs/angular.min.js"></script>
</head>
<body>
<div class="middle">
<form>
帐号：<input type="text" ng-model="account"><br>
密码：<input type="password" ng-model="password"><br>
</form>

<hr>
<div>
您输入的帐号：<span>{{account}}</span><br>
您输入的密码：<span>{{password}}</span>
</div>

</div>
</body>
</html>

   这里有三个关键的部分：
   【1】<html lang="en" ng-app>      在html标签中声明ng-app，否则Angular标签不生效。

   【2】<input type="text" ng-model="account">      在输入框中指定属性ng-model="account"，这是待会儿要获取内容的标签元素。

   【3】<span>{{account}}</span>    使用{{ }}符号，将上边指定 ng-model="account" 属性的输入框值取出来，并放在这个使用了{{account}} 符号的标签元素中。他们中间的纽带就是account。

实现几个步骤即可实现上边gif图片中展示的内容，简单方便。小伙伴们快试试吧~

示例代码地址：https://github.com/nongweiyi/csdnBlogProjects/tree/master/AngularJS/FirstTouchAngular

你可以在这里下载Angular脚本：https://github.com/nongweiyi/csdnBlogProjects/tree/master/AngularJS/libs

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Angular html 获取内容 form

相关文章推荐

新的分享

章节导航