本文介绍了一个使用AngularJS简化输入框内容动态更新的例子。通过对比原生JavaScript的方式，展示了AngularJS如何仅用ng-model指令实现数据的自动同步，适用于各种输入框交互场景。
我们先看一个实例：
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" ng-model="name" placeholder="请输入名字"/>
<h1>{{name}}</h1>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript">
</script>
</html>
实现的功能：随着input内容的改变动态改变h1里面的内容
原生JavaScript实现方式：给input定义一个onchange事件并且调用一个操作DOM的函数（比较麻烦）
angular实现实现方式：只需要一个ng-model指令就可以完成，不需要写任何js代码
应用场景：输入框类交互任务时
扫一扫
375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
