angularjs select_angualrjs怎么获取select相应文本-优快云博客

本文详细介绍了如何使用Angular实现下拉单选和下拉多选功能，包括单选选择展示姓名和性别，多选选择并展示姓名，以及通过图片作为选项的展示方式。

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

下拉单选

<html ng-app="my_app">
	<head>
		<meta name="viewport" content="width=device-width" />
		<title>下拉单选测试</title>
		<script type="text/javascript" src="./angular.min.js"></script>
		<script type="text/javascript">
			var app = angular.module("my_app", []);
			app.controller('my_controller', function($scope) {
				$scope.student = '1';
				$scope.students = [{
						id: '1',
						name: '张一',
						gender: '男',
					},
					{
						id: '2',
						name: '李二',
						gender: '男',
					},
					{
						id: '3',
						name: '王三',
						gender: '男',
					},
					{
						id: '4',
						name: '马四',
						gender: '女',
					},
					{
						id: '5',
						name: '鬼五',
						gender: '女',
					}
				];
			});
		</script>
	</head>
	<body ng-controller="my_controller">
		<div>
			<select ng-model="student" ng-options="s.id as s.name for s in students
			| filter: { gender : '男' }"></select>
			<input type="text" ng-model="student" />
		</div>
	</body>
</html>

下拉多选

<html ng-app="my_app">
	<head>
		<meta charset="utf-8">
		<title>下拉多选测试</title>
		<script type="text/javascript" src="./angular.min.js"></script>
		<script type="text/javascript">
			var app = angular.module("my_app", []);
			app.controller('my_controller', function($scope) {
				$scope.student = '1,2';
				$scope.students = [{
						id: '1',
						name: '张一'
					},
					{
						id: '2',
						name: '李二'
					},
					{
						id: '3',
						name: '王三'
					},
					{
						id: '4',
						name: '马四'
					},
					{
						id: '5',
						name: '鬼五'
					}
				];
			});
			// 将字符串转化成数组
			app.directive("toList", function() {
				return {
					require: 'ngModel',
					link: function(scope, element, attrs, ngModel) {
						ngModel.$formatters.push(function(value) {
							if (value)
								return value.split(',');
							return value;
						});
					}
				};
			});
		</script>
	</head>
	<body ng-controller="my_controller">
		<div>
			<select ng-model="student" ng-options="s.id as s.name for s in students" 
			to_list multiple="multiple">
			</select>
			<input type="text" ng-model="student" />
		</div>
	</body>
</html>

图片下拉

<html ng-app="my_app">
	<head>
		<meta name="viewport" content="width=device-width" />
		<title>下拉单选测试</title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<link href="bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
		<style type="text/css">
			/******  头像 *******/
			.avatar {
				width: 25px;
			}

			.media .username {
				display: inline-block;
				line-height: 30px;
			}
		</style>
		<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
		<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="./bootstrap-select/js/bootstrap-select.min.js"></script>
		<script type="text/javascript" src="./angular.min.js"></script>
		<script type="text/javascript">
			var app = angular.module("my_app", []);
			app.controller('my_controller', function($scope) {
				$scope.student = '2';
				$scope.students = [{
						id: '1',
						name: '张一',
						gender: '男',
						image: 'images/2.jpg',
					},
					{
						id: '2',
						name: '李二',
						gender: '男',
						image: 'images/2.jpg',
					},
					{
						id: '3',
						name: '王三',
						gender: '男',
						image: 'images/IMG_0118.GIF',
					},
					{
						id: '4',
						name: '马四',
						gender: '女',
						image: 'images/2.jpg',
					},
					{
						id: '5',
						name: '鬼五',
						gender: '女',
						image: 'images/IMG_0118.GIF',
					}
				];
			});
		</script>
	</head>
	<body ng-controller="my_controller">
		<div>
			<select class="form-control selectpicker" data-live-search="false" ng-model="student">
				<option ng-repeat="item in students" value='{{item.id}}' 
				data-content='<span class="media">
				<span class="media-left">
				<img src="{{item.image}}" class="avatar"></span>
				<span class="media-body username">{{item.name}}</span>'>{{item.name}}</option>
			</select>
		</div>
	</body>
</html>