欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2019年11月17日 11:37:59   作者：Wang Xiaojiang  
這篇文章主要給大家介紹了關于AngularJS動態(tài)生成select下拉框的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用AngularJS具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

一、select相關知識

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

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

二、ng-options

1.數組作為數據源

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

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

<!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需一致，否則會報錯
		表達式語法：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>

最終得到的結果為：

<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 ，會在數組中原有的字符串之前加上其類型的標識，這個通過百度了解到是因為angularjs版本問題造成，具體未測試。

代碼2（數組中為一個對象）

<!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 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變量并非選中項的name屬性，而是選中項的全部屬性
	如選中了索引為0項，則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 值顯示為數據類型，而實際想要得到的結果是顯示我們選中的值，因此需要寫為：

<!--
	表達式語法: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 對應value ，c.name 對應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（根據對象屬性分類）

<!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 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':'手機'},
				 {'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="手機">
  <option value="object:5" label="蘋果">蘋果</option>
 </optgroup>		
 <optgroup label="購物">
  <option value="object:6" label="淘寶">淘寶</option>
 </optgroup>
</select>

注意事項(默認選中問題)

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

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

<!-- 以代碼2中(label for value in array)和(select as label for value in array) 為例-->
<!-- 
	方式一:ng-init屬性
	兩種語法形式在使用ng-init時有一定區(qū)別，其中第二中寫為了name=coms[0].id是因為在ng-options中通過		select as 為當前的select指定了coms[0].id作為value的值；在寫法一種未指定value值，則默認為coms中	 的一個對象。
-->
<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':'手機'},
				 {'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.對象作為數據源

  • 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}}
 <!-- 
		表達式語法：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':'手機'},
				 {'id':'TaoBao', 'name':'淘寶','type':'購物'}
				];
});
</script>
</body>
</html>

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

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。

相關文章

最新評論