[Angularjs] 下拉框遍历使用ng-repeat和ng-options

本文详细介绍了AngularJS中ng-options指令的使用方法,包括如何通过ng-options展示数组中的键值对,并实现默认选项的选择。同时,还探讨了在不同场景下初始化默认选项的多种方法。

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

ng-repeat这种方式很简单。

写一个select,然后在里面的option标签里加上ng-repeat指令就可以了。

这种很单一,但是实际应用当中,我们通常都是键值对这种方式。

比如option里的value一个值,展示的时候又一个值。那ng-repeat就不好实现了。

这个时候就应该用ng-options了。

JS代码片段

$scope.options = {
	'jsonHead': 'sqls',
	'dbName': 'oracle',
	'submitType': [
		{ 'sortValue': 0, 'type': 'sr' },
		{ 'sortValue': 1, 'type': 'pkgh' },
		{ 'sortValue': 2, 'type': 'pkgb' },
		{ 'sortValue': 3, 'type': 'trigger' },
		{ 'sortValue': 4, 'type': 'job' }
	],
	'prePath': '',
	'fileName': ''
};
$scope.selectedIndex = $scope.options.submitType[0];//默认选中第一个

HTML代码片段

<select class="form-control" ng-model="selectedIndex" 
ng-options="x.type for x in options.submitType"></select>

运行效果:

113711_gao2_2436852.png

有几个点需要记录一下。

ng-options="x.type for x in options.submitType"

这句话的意思是从options.submitType这个数组取值。

in左右的x为变量名。for左边的x.type是咱们展示到页面上的属性值

特别需要强调一下,这里的select标签里一定要ng-model绑定一个对象,名字可以任意取

然后就是

$scope.selectedIndex = $scope.options.submitType[0];//默认选中第一个

注释已经说明了。

今天做项目的时候发现自己有另一种需求,这里再次记录下!

当咱们的数组数据只是

如下这样:

{
	field:'addInterface',
	type:'select',
	text:'接口类型',
	val:[{val:0,text:'无'},{val:1,text:'ESG'},{val:2,text:'JS跨域调用'},{val:3,text:'其它'}],
	style:'column'
}

那这个时候咱们需要初始化默认选中val=1,text='ESG'怎么办?

先写案例1:

<select ng-options="z.text for z in y.val" ng-model="y.field" ng-init="y.field=y.val[0]">

</select>

其实原理跟之前是一致。只是那里用代码实现,这里在init实现。默认选中第一个

然后咱们来看升级版:

<select class="form-control" ng-options="z.text for z in y.val" ng-model="y.field" ng-init="y.field=getOptionObj(y.field.text,y.val)">
</select>
$scope.getOptionObj = function(text,arr){
	for(var i=0,len=arr.length;i<len;i++){
		if(arr[i].text === text){
			return arr[i];
		}
	}
	return arr[0];//返回默认的
};

ng-init的时候可以调用一个函数。

默认返回第0项。然后根据文本值再返回对应的项。

 

总结下:两种方式:一种是用代码获取数组里的第0项来初始化。

第二种是在页面写ng-init的时候初始化。

至于函数那种方式,是初始化的时候,本身ng-model里的对象就有数据了,

可以初始化选中对应的项。

ng-options还有很多用法具体的可以参考如下:

http://www.runoob.com/angularjs/angularjs-select.html

 

转载于:https://my.oschina.net/u/2436852/blog/916972

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值