Angular中ng-options的常用案例

最新推荐文章于 2025-05-20 00:01:44 发布

原创最新推荐文章于 2025-05-20 00:01:44 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ng-options

angular 专栏收录该内容

9 篇文章

订阅专栏

本文详细解析了HTML、AngularJS下拉框的基本遵循、提交值、显示值、对象数组格式等内容，并通过具体代码实例展示了如何实现不同场景的下拉框功能，包括根据对象属性、代码和值进行选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例基本遵循提交的值 as 显示的值 for 对象 in 数组的格式

具体代码如下：

<!DOCTYPE html>
<html ng-app ="myapp">
	<head>
		<meta charset="UTF-8">
		<title>下拉框</title>
		<script type="text/javascript" src="../js/angular.js" ></script>
	</head>
	<body ng-controller = "MainCtrl as mainctrl">
		<select name="" id="" ng-model = "mainctrl.value" ng-options ="item for item in mainctrl.array01"></select>
		<select name="" id=""ng-model = "mainctrl.value" ng-options = "item.code as item.city for item in mainctrl.array02"></select>
		<select name="" id=""ng-model = "mainctrl.value" ng-options = "value as key for (key,value) in mainctrl.array03"></select>
		{{mainctrl.value}}
	</body>
</html>
<script>
	var app = angular.module('myapp',[]);
	app.controller('MainCtrl',[function(){
		this.value = "";
		this.array01 = ['Ai大数据中心','事业中心','陆兵学院','财务中心','人力中心'];
		this.array02 = [
			{"code" : "010","city" : "北京"},
			{"code" : "021","city" : "上海"},
			{"code" : "022","city" : "重庆"},
			{"code" : "007","city" : "邦德"},
			{"code" : "008","city" : "火箭"},
		];
		this.array03 = {
			'北京':'京',
			'上海':'沪',
			'广西':'桂',
			'山东':'鲁',
		};
	}]);
</script>

情景一：