AngularJS動態(tài)生成select下拉框的方法實(shí)例

更新時(shí)間：2019年11月17日 11:37:59 作者：Wang Xiaojiang

這篇文章主要給大家介紹了關(guān)于AngularJS動態(tài)生成select下拉框的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用AngularJS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

一、select相關(guān)知識

<select>
	<option value="0">HTML</option>
 <option value="1">Java</option>
 <option value="2">Python</option>
</select>

其中，value 是存儲到數(shù)據(jù)庫的值，在此處為0，1，2這些數(shù)值，label 為顯示在頁面的值，在此處為Html、Java這些字符。

二、ng-options

1.數(shù)組作為數(shù)據(jù)源

label for value in array
select as label for value in array
label group by group for value in array

代碼1(數(shù)組中為字符串)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
 <!--
		這里的label和value需一致，否則會報(bào)錯(cuò)
		表達(dá)式語法：label for value in array
	-->
	<select ng-model="name" ng-options="name for name in names"></select>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.names = ['baidu', 'Google', 'apple'];
});
</script>
</body>
</html>

最終得到的結(jié)果為：

<select ng-model="name" ng-options="name for name in names" class="ng-pristine ng-valid ng-touched">
 <option value="?" selected="selected"></option>
 <option value="string:baidu" label="baidu">baidu</option>
 <option value="string:Google" label="Google">Google</option>
 <option value="string:apple" label="apple">apple</option>
</select>

需要注意的是，在最后生成的html代碼中option的value 值為String:baidu ，會在數(shù)組中原有的字符串之前加上其類型的標(biāo)識，這個(gè)通過百度了解到是因?yàn)閍ngularjs版本問題造成，具體未測試。

代碼2（數(shù)組中為一個(gè)對象）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
 <!--
		表達(dá)式語法：label for value in array
	-->
	<select ng-model="name" ng-options="c.id for c in coms"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.coms = [
  {'id':'baidu','name':'百度'}, 
  {'id':'Google', 'name':'谷歌'}, 
  {'id':'apple', 'name':'蘋果'}];
});
</script>
</body>
</html>

最終得到的html代碼為：

<!-- 注意：此處ng-model綁定的name變量并非選中項(xiàng)的name屬性，而是選中項(xiàng)的全部屬性
	如選中了索引為0項(xiàng)，則name={"id":"baidu","name":"百度"}
	這邊ng-model綁定變量為值為select的value值
-->
<select ng-model="name" ng-options="c.id for c in coms" class="ng-pristine ng-valid ng-touched">
 <option value="?" selected="selected"></option>
 <option value="object:3" label="baidu">baidu</option>
 <option value="object:4" label="Google">Google</option>
 <option value="object:5" label="apple">apple</option>
</select>

通過生成的html代碼，我們可以看到這樣寫會使得最終的option 的value 值顯示為數(shù)據(jù)類型，而實(shí)際想要得到的結(jié)果是顯示我們選中的值，因此需要寫為：

<!--
	表達(dá)式語法:select as label for value in array
		c.id作為select的value，c.name作為select的label
-->
ng-options="c.id as c.name for c in coms"

其中，c.id 對應(yīng)value ，c.name 對應(yīng)label 。生成html代碼為：

<select ng-model="name" ng-options="c.id as c.name for c in coms" class="ng-pristine ng-valid ng-touched">
 <option value="?" selected="selected"></option>
 <option value="string:baidu" label="百度">百度</option>
 <option value="string:Google" label="谷歌">谷歌</option>
 <option value="string:apple" label="蘋果">蘋果</option>
</select>

代碼3（根據(jù)對象屬性分類）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
 <!--
		表達(dá)式語法：label group by group for value in array
	-->
	<select ng-options="c.name group by c.type for c in coms" ng-model="name" ></select>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.coms = [{'id':'baidu','name':'百度','type':'搜索'}, 
				 {'id':'Google', 'name':'谷歌','type':'搜索'}, 
				 {'id':'apple', 'name':'蘋果','type':'手機(jī)'},
				 {'id':'TaoBao', 'name':'淘寶','type':'購物'}
				];
});
</script>
</body>
</html>

得到的html代碼為：

<select ng-options="c.name group by c.type for c in coms" ng-model="name" class="ng-pristine ng-valid ng-touched">
 <optgroup label="搜索">
  <option value="object:3" label="百度" selected="selected">百度</option>
  <option value="object:4" label="谷歌">谷歌</option></optgroup>
 <optgroup label="手機(jī)">
  <option value="object:5" label="蘋果">蘋果</option>
 </optgroup>		
 <optgroup label="購物">
  <option value="object:6" label="淘寶">淘寶</option>
 </optgroup>
</select>

注意事項(xiàng)(默認(rèn)選中問題)

通過以上最終得到的HTML代碼可以發(fā)現(xiàn)，每次生成的代碼都會默認(rèn)選中一個(gè)空白的選項(xiàng)，如果需要手動指定一個(gè)默認(rèn)選中值應(yīng)該怎么設(shè)置？

我們有兩種方式(此處代碼不完整，驗(yàn)證時(shí)請將html部分補(bǔ)充完整)：

<!-- 以代碼2中(label for value in array)和(select as label for value in array) 為例-->
<!-- 
	方式一:ng-init屬性
	兩種語法形式在使用ng-init時(shí)有一定區(qū)別，其中第二中寫為了name=coms[0].id是因?yàn)樵趎g-options中通過		select as 為當(dāng)前的select指定了coms[0].id作為value的值；在寫法一種未指定value值，則默認(rèn)為coms中	 的一個(gè)對象。
-->
<select ng-init="name1=coms[0]" ng-options="c.name for c in coms" ng-model="name1"></select>
<select ng-init="name2=coms[0].id" ng-options="c.id as c.name for c in coms" ng-model="name2"></select>

<!--
	方式二： 在js代碼中為ng-model綁定的變量賦值
-->
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.coms = [{'id':'baidu','name':'百度','type':'搜索'}, 
				 {'id':'Google', 'name':'谷歌','type':'搜索'}, 
				 {'id':'apple', 'name':'蘋果','type':'手機(jī)'},
				 {'id':'TaoBao', 'name':'淘寶','type':'購物'}
				];
 // label for value in array
	$scope.name1 = $scope.coms[0];
 
 // select as label for value in array
	$scope.name2 = $scope.coms[0].id;
});
</script>

2.對象作為數(shù)據(jù)源

label for (key, value) in object

代碼展示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
	{{name4}}
 <!-- 
		表達(dá)式語法：select as label for (key, value) in object
	-->
	<select ng-options="value as key for (key, value) in province" ng-model='name4'></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {	
	$scope.province = {
		'北京':'京',
		'山西':'晉',
		'上海':'滬',
	};
});
</script>
</body>
</html>

3.全部語法

for array data sources:

label for value in array
select as label for value in array
label group by group for value in array
label disable when disable for value in array
label group by group for value in array track by trackexpr
label disable when disable for value in array track by trackexpr
label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)

for object data sources:

label for (key , value) in object
select as label for (key ,value) in object
label group by group for (key,value) in object
label disable when disable for (key, value) in object
select as label group by group for(key, value) in object
select as label disable when disable for (key, value) in object

三、ng-repeat

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
	<select>
		<option value="" selected="selected">====請選擇====</option>
		<option ng-repeat="com in coms" value="{{com.name}}">{{com.name}}</option>
	</select>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.coms = [{'id':'baidu','name':'百度','type':'搜索'}, 
				 {'id':'Google', 'name':'谷歌','type':'搜索'}, 
				 {'id':'apple', 'name':'蘋果','type':'手機(jī)'},
				 {'id':'TaoBao', 'name':'淘寶','type':'購物'}
				];
});
</script>
</body>
</html>

四、總結(jié)
使用ng-repeat動態(tài)生成select比ng-option略微簡單，但是ng-repeat有一定的局限性，選擇的值只能是一個(gè)字符串，而使用ng-option選擇的值可以是一個(gè)對象。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: