AngularJS 数据绑定,双向绑定(ng-model)

最新推荐文章于 2021-12-26 16:16:24 发布

houyanhua1

最新推荐文章于 2021-12-26 16:16:24 发布

阅读量1.5k

点赞数

分类专栏： AngularJS 文章标签： angularjs 数据绑定

本文链接：https://blog.csdn.net/houyanhua1/article/details/80116262

版权

AngularJS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

数据双向绑定：视图上的数据通过表单元素绑定到Model模型($scope)上。（用户只能通过表单元素输入数据）

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AngularJS</title>
	<script src="angular.min.js"></script>  <!-- 引入AngularJS框架 -->
</head>
<body ng-app="App">  <!-- ng-app 指定模块 -->
	
	<div ng-controller="DemoController">
		<!-- 通过表单元素绑定数据(用户可以通过表单元素输入数据) -->
		<input type="text" ng-model="msg" >  <!-- 数据双向绑定。ng-model数据从视图绑定到$scope上 -->
		<button ng-click="show()">显示</button>
		<ul>
			<li ng-bind="msg"></li>  <!-- ng-bind数据从$scope上绑定到视图上 -->
		</ul>
	</div>

	<script>
		// 创建模块
		var App = angular.module('App',[]);

		App.controller("DemoController",['$scope',function($scope) {
			// $scope相当于MVC中的Model

			$scope.show = function() {
				alert($scope.msg);  //视图中绑定到$scope上的数据。
			}
		}]);
		
	</script>
</body>
</html>

houyanhua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 数据绑定,双向绑定(ng-model)

数据双向绑定：视图上的数据通过表单元素绑定到Model模型($scope)上。（用户只能通过表单元素输入数据）demo.html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;AngularJS&lt;/title&
复制链接

扫一扫

专栏目录