关闭

AngularJS之下拉框(方式三)

标签: angularjsJavaScript
902人阅读 评论(0) 收藏 举报
分类:

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、实现结果

     

1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

angularJS实现可编辑的下拉框

将angularJS与插件select2结合使用即可                          ...
  • heshan1992
  • heshan1992
  • 2017-08-18 09:43
  • 399

angularjs中的下拉框,以及数据的回显,并且还可以实现下拉框的功能

两种实现方式      一 ,第一种就是使用select来实现下拉框,如下 Java代码   class="input-select" >   ...
  • h254532699
  • h254532699
  • 2017-01-11 13:19
  • 3244

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

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

AngularJS下拉列表动态获取

angularjs 前端下拉列表动态显示数据
  • llccdd1989
  • llccdd1989
  • 2017-04-09 08:36
  • 1241

关于angular选取select下拉框中的值

--请选择-- 特别重大 重大 较大 一般 js代码:方法一、如果直接通过$scope.fLevelBefore  进行取值是
  • tquank
  • tquank
  • 2016-03-25 14:00
  • 6245

angularjs指令 下拉框

  • 2015-12-23 17:28
  • 58KB
  • 下载

Angular JS select 下拉框设置value

今天在系统中增加一个查询的筛选条件,通过下拉框选取,用的是Angular常见的ng-options 指令: detectUnits" ng-options="detectUnit.name for d...
  • zhouyingge1104
  • zhouyingge1104
  • 2016-01-25 11:02
  • 11998

深究AngularJS——下拉框(selected)

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

AngularJS 动态设置select的默认selected

遇到一个问题,在控制器里设置了stafftype的默认值.controller('InfoStaffCtrl', function($scope, $rootScope, $state, $log,$...
  • WenJimmy
  • WenJimmy
  • 2016-03-29 15:43
  • 21257

angularjs下拉列表 select

ee 学制: --请选择-- {{a_show}} 班级: --请选择-- {{b_show}} var...
  • u014520745
  • u014520745
  • 2016-10-25 10:00
  • 838
    个人资料
    • 访问:5368511次
    • 积分:71087
    • 等级:
    • 排名:第30名
    • 原创:1921篇
    • 转载:76篇
    • 译文:3篇
    • 评论:1182条
    百度技术栏目
    网易博客
    新浪博客
    博客专栏
    Linux

    文章:47篇

    阅读:64240
    dojo

    文章:10篇

    阅读:30003
    Flex

    文章:13篇

    阅读:28748
    FusionCharts

    文章:14篇

    阅读:70688
    文章分类
    最新评论