前端讲义68_AngularJS表单：动态生成列表项的应用2

原创于 2019-06-08 17:49:52 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

Angular 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何利用AngularJS中的ng-options指令动态生成选择列表，通过一个实例展示了如何从对象数组中选择特定值，并实时更新视图。示例中包含了HTML、AngularJS脚本和控制器的完整代码。

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

ng-options指令也可以动态生成列表项，选中的值是一个对象

看看下面代码演示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="mshApp">
<div ng-controller="mshCtr">
	<form name="myForm">
	请选择书籍：
	<select name="mySelect" id="mySelect" 
			ng-options="op.name for op in data.books " 
			ng-model="selectedBook">
	</select>
	</form>
	<hr>
	<tt>option = {{selectedBook.name}}</tt><br/>
</div>
<script >
var app=angular.module('mshApp', []);
app.controller('mshCtr',f1);
function f1($scope) {
	$scope.data = {
		books: [
				{id: 11, name:'ASP.NET MVC5 高级编程'},
				{id: 12, name:'Visual Studio 2015 高级编程'},
				{id: 13, name:'ASP.NET入门经典'},
				]};
	};
</script>
</body>
</html>