5、AngularJs中的双向向数据绑定(MVVM)与表单处理相关指令

阅读() @2019-03-17 16:05:12

一、什么是双向数据绑定?

AngularJs有一个很强大的功能就是双向数据绑定,即MVVM,什么是双向数据绑定呢?

在一般的应用当中,后端给前端返回数据,前端数据发生改变,如果不做表单或者是ajax数据提交,这些数据是不会及时返回给后端的,也就是单向数据绑定,而AngularJs能做到双向数据绑定,数据从模型->视图->视图->模型,这样一个过程,看下面这段代码:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<style type="text/css">
			.ng-cloak{display:none;}
		</style>
	</head>
	<body ng-app='app' ng-controller='ctrl' ng-cloak class="ng-cloak">
		<input type="text" ng-model='name' />
		<h1>{{name}}</h1>
	</body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctrl', ['$scope', function($scope){
		$scope.name= '赵一鸣';
	}]);
</script>

当你手动改变input中的值的时候,发现h1标签里的文字也会发生改变,这就是双向数据绑定。

ng-model结合ng-value实现的双向数据绑定小实例,这两个指令只能用于input表单:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<style type="text/css">
			.ng-cloak{display:none;}
		</style>
	</head>
	<body ng-app='app' ng-controller='ctrl' ng-cloak class="ng-cloak">
		<p>名称:<input type="text" ng-model="goods.data.name" /></p>
		<p>价格:<input type="text" ng-model="goods.data.price" /></p>
		<p>数量:<input type="text" ng-model="goods.data.num" /></p>
		<p>总价:<input type="text" ng-value="goods.data.price*goods.data.num" /></p>
	</body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctrl', ['$scope', function($scope){
		$scope.goods = {
			data : {
				'name' : '赵一鸣的AngularJs学习笔记',
				'price' : '100',
				'num' : 1
			}
		};
	}]);
</script>

二、双向数据绑定在input单选框表单中的应用:

直接用AngularJs实现这个功能,如果单选框status的值是1,说明网站正常运行,提示文字隐藏,如果status的值是0,说明网站出故障,提示文字显示。

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<style type="text/css">
			.ng-cloak{display:none;}
		</style>
	</head>
	<body ng-app="app" ng-controller="ctrl">
		开启:<input type="radio" name="status" ng-model="status" value="1" checked />
		关闭:<input type="radio" name="status" ng-model="status" value="0" />
		{{status}}
		<div ng-show="status==0">
			网站正在维护中,1小时后重新开启!
		</div>
	</body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctrl', ['$scope', function($scope){
		$scope.status = 1;
	}]);
</script>

ng-show这个指令,如果是true,则所在标签显示,如果是false,则所在标签隐藏。

三、双向数据绑定在input复选框表单中的应用:

比如有玩游戏和看电影两个选项,它们各自被选中之后,各自对应的textarea文本框就显示,否则就隐藏。

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<style type="text/css">
			.ng-cloak{display:none;}
		</style>
	</head>
	<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
		<p>
			<label>游戏:</label>
			<input type="checkbox" ng-model="choose.game" ng-true-value="1" ng-false-value="0" />
		</p>
		<p>
			<label>电影:</label>
			<input type="checkbox" ng-model="choose.movie" ng-true-value="1" ng-false-value="0" />
		</p>
		<textarea ng-show="choose.game==1">玩游戏</textarea>
		<textarea ng-show="choose.movie==1">看电影</textarea>
	</body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctrl', ['$scope', function($scope){
		$scope.choose = {
			'game' : 0,
			'movie' : 0
		};
		$scope.a = 0;
	}]);
</script>

可以自定义checkbox被选中或取消选中之后的value值,ng-true-value表示选中之后的value值,ng-false-value表示取消选中之后的value值。

四、双向数据绑定在select下拉列表框中的应用:

比如选择某个城市:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<style type="text/css">
			.ng-cloak{display:none;}
		</style>
	</head>
	<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
		<select ng-options="v.value as v.name for v in data" ng-model="city">
			<option value="">---请选择城市---</option>
		</select>
	</body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctrl', ['$scope', function($scope){
		//$scope.city = 'guangzhou';
		$scope.data = [
			{
				'name' : '北京',
				'value' : 'beijing'
			},
			{
				'name' : '上海',
				'value' : 'shanghai'
			},
			{
				'name' : '广州',
				'value' : 'guangzhou'
			}
		];
	}]);
</script>
指令ng-options就是循环读取data数组中的json数据,v.value作为option的value值,v.name作为option的innerHTML。

默认的option比如请选择城市,一定要有value值,并且value值是空,这样就可以正常显示!

如果通过指令定义了$scope.city = 'shanghai',并且在select标签内加入了ng-model='city',那么在默认打开页面的时候,Angular会根据option中与预先定义的city相同的进行比较,然后默认选中那个选项。

微信二维码