AngularJS使用ng-repeat指令實(shí)現(xiàn)下拉框
更新時(shí)間：2016年08月23日 12:02:31 作者：翱翔天地
這篇文章主要介紹了AngularJS使用ng-repeat指令實(shí)現(xiàn)下拉框的相關(guān)資料,非常不錯(cuò)，感興趣的朋友一起看下吧，需要的朋友可以參考下
AngularJs 的 ng-repeat 讓我們非常方便的遍歷數(shù)組生成 Dom 元素，但是使用不當(dāng)也會(huì)有性能問(wèn)題。下面給大家分享在項(xiàng)目中使用ng-repeat指令實(shí)現(xiàn)下拉框。
1、問(wèn)題背景
select下拉框里option組裝成下拉框，這里利用ng-repeat指令來(lái)創(chuàng)建
2、實(shí)現(xiàn)源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS之下拉框（方式二）</title>
<script type="text/javascript" src="../js/angular.min.js" ></script>
<script>
var app = angular.module("secondApp",[]);
app.controller("secondCon",function($scope){
$scope.trees = ["松樹(shù)","樟樹(shù)","楓樹(shù)","棗樹(shù)","桃樹(shù)"];
});
</script>
</head>
<body>
<div ng-app="secondApp" ng-controller="secondCon">
<select style="width: 200px;">
<option ng-repeat="tree in trees">{{tree}}</option>
</select>
</div>
</body>
</html>
3、問(wèn)題說(shuō)明
ng-repeat指令可以重復(fù)數(shù)據(jù)
以上所述是小編給大家介紹的AngularJS使用ng-repeat指令實(shí)現(xiàn)下拉框，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- AngularJS動(dòng)態(tài)生成select下拉框的方法實(shí)例
- angularjs 動(dòng)態(tài)從后臺(tái)獲取下拉框的值方法
- angularJs-$http實(shí)現(xiàn)百度搜索時(shí)的動(dòng)態(tài)下拉框示例
- AngularJS中下拉框的高級(jí)用法示例
- AngularJS中下拉框的基本用法示例
- Angularjs實(shí)現(xiàn)下拉框聯(lián)動(dòng)的示例代碼
- angularjs下拉框空白的解決辦法
- angularjs 實(shí)現(xiàn)帶查找篩選功能的select下拉框?qū)嵗?/a>
- Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框示例代碼
- AngularJS實(shí)現(xiàn)多級(jí)下拉框
相關(guān)文章
本文主要介紹AngularJs Scope的知識(shí)，這里整理了詳細(xì)資料及示例代碼，有興趣的小伙伴可以參考下
2016-09-09 
Angular使用$http.jsonp發(fā)送跨站請(qǐng)求的方法
這篇文章主要介紹了Angular使用$http.jsonp發(fā)送跨站請(qǐng)求的方法,結(jié)合實(shí)例形式分析了$http.jsonp發(fā)送跨站請(qǐng)求遇到的問(wèn)題與相應(yīng)的解決方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2017-03-03 
在Angular項(xiàng)目使用socket.io實(shí)現(xiàn)通信的方法
這篇文章主要介紹了在Angular項(xiàng)目使用socket.io實(shí)現(xiàn)通信的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-01-01 
詳解angularjs中如何實(shí)現(xiàn)控制器和指令之間交互
本篇文章主要介紹了詳解angularjs中如何實(shí)現(xiàn)控制器和指令之間交互，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05 
AngularJS 讓人愛(ài)不釋手的八種功能，想知道AngularJS哪八種功能讓人喜歡就快點(diǎn)看下本文吧
2016-03-03 
在我們創(chuàng)建一個(gè)angularJS應(yīng)用的時(shí)候，菜單往往往是不可或缺的元素之一。接下來(lái)通過(guò)本文給大家介紹AngularJS動(dòng)態(tài)菜單操作指令，感興趣的朋友一起學(xué)習(xí)吧
2017-04-04 
AngularJS 限定$scope的范圍實(shí)例詳解
這篇文章主要介紹了AngularJS 限定$scope的范圍實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2017-06-06 
單頁(yè)應(yīng)用中，組件時(shí)構(gòu)建應(yīng)用的基礎(chǔ)元素，頁(yè)面展示什么內(nèi)容均是靠頁(yè)面有什么組件決定的，而展示什么組件又是由一組路由（帶有Url元素的特定集合，可用于導(dǎo)航視圖）決定的，希望本文可以幫助讀者了解路由的基礎(chǔ)概念和基礎(chǔ)使用、寫(xiě)法。
2021-05-05 
Angular企業(yè)級(jí)開(kāi)發(fā)——MVC之控制器詳解
本篇文章主要介紹了Angular企業(yè)級(jí)開(kāi)發(fā)——MVC之控制器詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02