AngularJS動態(tài)生成select下拉框的方法實例
更新時間：2019年11月17日 11:37:59 作者：Wang Xiaojiang
這篇文章主要給大家介紹了關(guān)于AngularJS動態(tài)生成select下拉框的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用AngularJS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(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需一致，否則會報錯
表達式語法：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)識，這個通過百度了解到是因為angularjs版本問題造成，具體未測試。
代碼2（數(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 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 值顯示為數(shù)據(jù)類型，而實際想要得到的結(jié)果是顯示我們選中的值，因此需要寫為：
<!-- 表達式語法: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">
<!--
表達式語法：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ā)現(xiàn)，每次生成的代碼都會默認選中一個空白的選項，如果需要手動指定一個默認選中值應(yīng)該怎么設(shè)置？
我們有兩種方式(此處代碼不完整，驗證時請將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 為當(dāng)前的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.對象作為數(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}}
<!--
表達式語法：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>
四、總結(jié)
使用ng-repeat動態(tài)生成select比ng-option略微簡單，但是ng-repeat有一定的局限性，選擇的值只能是一個字符串，而使用ng-option選擇的值可以是一個對象。
好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。
您可能感興趣的文章:
相關(guān)文章
AngularJs Dependency Injection（DI，依賴注入）
本文主要介紹AngularJs Dependency Injection，這里整理了詳細資料及示例代碼有興趣的小伙伴可以參考下2016-09-09
本篇文章主要介紹了詳解使用angular的HttpClient搭配rxjs ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
AngularJS基礎(chǔ) ng-class-odd 指令示例
本文主要介紹AngularJS ng-class-odd 指令,這里對ng-class-odd基礎(chǔ)知識做了詳細整理,并有示例代碼和效果圖,學(xué)習(xí)AngularJS的同學(xué)可以參考下2016-08-08
這篇文章主要介紹了Angularjs 實現(xiàn)分頁功能及示例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了在angular 6中使用 less 的實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05
Angular將填入表單的數(shù)據(jù)渲染到表格的方法
這篇文章主要介紹了Angular將填入表單的數(shù)據(jù)渲染到表格的方法，非常具有實用價值，需要的朋友可以參考下2017-09-09
Angular2.0實現(xiàn)modal對話框的方法示例
這篇文章主要介紹了Angular2.0實現(xiàn)modal對話框的方法,結(jié)合實例形式分析了angular2.0實現(xiàn)modal對話框的樣式、界面及功能等相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了Angular單元測試之事件觸發(fā)的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了angularjs實現(xiàn)文字上下無縫滾動特效代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
Angular中點擊li標(biāo)簽實現(xiàn)更改顏色的核心代碼
這篇文章主要介紹了Angular中點擊li標(biāo)簽實現(xiàn)更改顏色的核心代碼,需要的朋友可以參考下2017-12-12