AngularJS双向数据绑定（angularJS)

最新推荐文章于 2024-05-04 10:00:00 发布

HaanLen

最新推荐文章于 2024-05-04 10:00:00 发布

阅读量774

点赞数

本文链接：https://blog.csdn.net/weixin_40119412/article/details/95032492

版权

一、数据绑定含义：

数据绑定是angularJS框架在视图与作用域之间建立的数据同步机制。所谓“双向”，是指界面的操作能够实时同步到作用域中，作用域的数据修改也能够实时回显到界面中。

二、angularJS应用构成元素

模型、视图、控制器、作用域、指令、表达式、模板

三、AngularJS内置指令（ng-app)

可以出现在任何位置。

作用：（1）启动angularJS框架。

（2）说明angularJS框架从ng-app指令所在的标签到结束标签之间的缩影DOM元素由angularJS框架进行管理。

<!DOCTYPE html>
<html ng-app>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="angular.js"></script>
	</head>
	<body >
		<div> {{"hello ,welcome!"}}</div>
		<div>{{"hello,angularJS!"}}</div>
	</body>
</html>

.

四、angularJS内置指令（ng-model)

该指令只能用于表单元素上。

<!DOCTYPE html>
<html ng-app>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="angular.js"></script>
	</head>
	<body>
		<div>用户名：<input type="text" ng-model="uname"></div>
		<div> {{uname}}</div>
	</body>
</html>

五、angularJS内置指令（ng-bind)

作用：实现作用域到视图的单向数据绑定，和表达式的功能类拟，可用于向界面中输出作用域的数据。

<!DOCTYPE html>
<html ng-app>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="angular.js"></script>
	</head>
	<body>
		<div>用户名：<input type="text" ng-model="uname"></div>
		<div ng-bind="uname"></div>
		<script type="text/javascript">
			alert("pause")
		</script>
	</body>
</html>

六、angularJS的内置指令（ng-init)

该指令用于声明变量，该指令的属性值可声明一个或多个变量，多个变量直接用分号隔开即可。

HaanLen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS双向数据绑定（angularJS)

一、数据绑定含义：数据绑定是angularJS框架在视图与作用域之间建立的数据同步机制。所谓“双向”，是指界面的操作能够实时同步到作用域中，作用域的数据修改也能够实时回显到界面中。二、angularJS应用构成元素模型、视图、控制器、作用域、指令、表达式、模板三、AngularJS内置指令（ng-app)可以出现在任何位置。作用：（1）启动angularJS框架。...
复制链接

扫一扫