AngularJS之下拉框(方式三)

原创 2016年08月28日 22:30:25

1、问题背景

     一般情况下,下拉框分为值和描述,value绑定值,<option></option>中间是描述


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS之下拉框(方式三)</title>
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<style>
			body,html,div{
				width: 99%;
				height: 99%;
				font-family: "微软雅黑";
				font-size: 16px;
			}
		</style>
		<script>
			var app = angular.module("selectApp",[]);
			app.controller("selectController",function($scope){
				$scope.student = [
					{stuNo:"2016010101",stuName:"张三"},
					{stuNo:"2016010102",stuName:"李斯"},
					{stuNo:"2016010103",stuName:"蝴蝶"},
					{stuNo:"2016010104",stuName:"利是"},
					{stuNo:"2016010105",stuName:"肇庆"},
					{stuNo:"2016010106",stuName:"思胡"}
				];
			});
		</script>
	</head>
	<body ng-app="selectApp" ng-controller="selectController">
		<div style="text-align: center;vertical-align: middle;">
			<select style="width: 200px;">
				<option ng-repeat="stu in student" value="{{stu.stuNo}}">
					{{stu.stuName}}({{stu.stuNo}})
				</option>
			</select>
		</div>
	</body>
</html>

3、实现结果

     

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

AngularJS中ng-options实现下拉列表的数据绑定

下拉列表的简单使用 ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值; 另一个是ng-options用于确定下拉列表的元素数组。 select n...

angularjs 下实现即可通过select选择 也可以通过input输入

题记:本篇文章介绍,一种可以select选择输入,也可以input,主要原理就是把input输入框覆盖select,并且在选择select后,把值赋值给input 1 参考demo 可输...

AngularJS之下拉框(方式一)

1、问题背景     一般情况下,select下都会有option,但是AngularJS中有指令ng-options,就可以实现select下拉框2、实现源码 AngularJS之下...

深究AngularJS——下拉框(selected)

即使写一个下拉框,也会有多种情况,我这里讲讲我遇到过的。1. 将值写死的情况: 全部广告类型 <optio

jQuery之下拉框左右选择

就是实现这个效果的,选中添加到右边,全部添加到右边,选中删除到左边,全部删除到左边。 html部分: class="centent"> select multip...

JavaScript学习笔记之下拉选择框的操作

对于下拉框的操作十分繁多,这几天项目需要就总结一下,select标签的JS操作和回显

AJAX解析XML实例之下拉框二级联动

这个例子是实现省、市二级联动,当选择某一省时,改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析XML文件得到的数据传回到jsp页面,其中省市均是从数据库取到的值: jsp页面代码: ...

Swing之下拉框

转载请注明原创地址:http://blog.csdn.net/u012643122/article/details/39081017 Swing中的下拉框JComboBox又丑又不能设置弹出的下拉菜...

EasyUI之下拉框combobox

1、实例背景     EasyUI下拉框combobox,实例给出一个日期控件和一个下拉框,选择日期控制下拉框的月份;改变下拉框选项就改变日期的月份。2、实例源码 EasyUI之下拉框...

ExtJs之下拉框

//下拉框store var store = new Ext.data.Store({ autoLoad: true, storeId: 'centerStore', pageSiz...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)