angularJS数据绑定实践1

2024-04-27 15:10:01

字体：大中小

来源：转载

供稿：网友

我们先看一个实例：

<!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代码
应用场景：输入框类交互任务时