AngularJS之動態生成select下拉框

時間  2020-07-16
標籤 angularjs 動態 生成 select 下拉 欄目 AngularJS 简体版
原文   原文鏈接

1、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這些字符。html

2、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>

最終獲得的結果爲：angularjs

<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 值顯示爲數據類型，而實際想要獲得的結果是顯示咱們選中的值，所以須要寫爲：app

<!--
	表達式語法: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代碼爲：spa

<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代碼能夠發現，每次生成的代碼都會默認選中一個空白的選項，若是須要手動指定一個默認選中值應該怎麼設置？code

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

<!-- 以代碼2中(label for value in array)和(select as label for value in array) 爲例-->
<!-- 
	方式一:ng-init屬性
	兩種語法形式在使用ng-init時有必定區別，其中第二中寫爲了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:htm

  • 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

3、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>

4、總結

使用ng-repeat動態生成select比ng-option略微簡單，可是ng-repeat有必定的侷限性，選擇的值只能是一個字符串，而使用ng-option選擇的值能夠是一個對象。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程