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

最新推荐文章于 2020-12-13 21:36:39 发布

weixin_34342207

最新推荐文章于 2020-12-13 21:36:39 发布

阅读量650

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2436852/blog/916972

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

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

2019独角兽企业重金招聘Python工程师标准>>>

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>

运行效果：

有几个点需要记录一下。

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];//返回默认的
};