AngularJS的select设置默认值

AngularJS中设置select默认值

最新推荐文章于 2018-06-28 16:53:10 发布

最新推荐文章于 2018-06-28 16:53:10 发布 · 346 阅读

文章标签：

#javascript #ViewUI

AngularJS 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何在AngularJS应用中为select元素设置默认值。通过实例展示了如何定义选项列表并与模型绑定，使得特定选项作为默认选中项。

[color=red][align=center][size=medium]AngularJS的select设置默认值[/size][/align][/color]

在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现

<!DOCTYPE html>
<html ng-app="noteApp" ng-controller="noteCtrl">
<head>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../plugins/angular.min.js"></script>

</head>
<body ng-app="noteApp" ng-controller="noteCtrl">
	<select ng-options="act.id as act.name for act in typeList"
		ng-model="ZNoteVo.type"></select>

</body>
<script type="text/javascript">
	angular.module("noteApp", []).controller("noteCtrl", function($scope) {
		$scope.typeList = [ {
			id : '01',
			name : "任务"
		}, {
			id : '02',
			name : "日志"
		}, {
			id : '03',
			name : "会议"
		}, {
			id : '04',
			name : "学习"
		}, {
			id : '05',
			name : "总结"
		}, {
			id : '99',
			name : "其他"
		} ];
		$scope.ZNoteVo={};
		$scope.ZNoteVo.type = "03";
	});
</script>
</html>