AngularJS使用ng-repeat指令實現(xiàn)下拉框
更新時間：2016年08月23日 12:02:31 作者：翱翔天地
這篇文章主要介紹了AngularJS使用ng-repeat指令實現(xiàn)下拉框的相關(guān)資料,非常不錯，感興趣的朋友一起看下吧，需要的朋友可以參考下
AngularJs 的 ng-repeat 讓我們非常方便的遍歷數(shù)組生成 Dom 元素，但是使用不當也會有性能問題。下面給大家分享在項目中使用ng-repeat指令實現(xiàn)下拉框。
1、問題背景
select下拉框里option組裝成下拉框，這里利用ng-repeat指令來創(chuàng)建
2、實現(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 = ["松樹","樟樹","楓樹","棗樹","桃樹"];
});
</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、問題說明
ng-repeat指令可以重復(fù)數(shù)據(jù)
以上所述是小編給大家介紹的AngularJS使用ng-repeat指令實現(xiàn)下拉框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
Angular實現(xiàn)點擊按鈕控制隱藏和顯示功能示例
這篇文章主要介紹了Angular實現(xiàn)點擊按鈕控制隱藏和顯示功能,結(jié)合實例形式分析了AngularJS簡單控制頁面元素顯示與隱藏的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
這篇文章主要為大家詳細介紹了Angular的$http與$location，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
詳解AngularJs HTTP響應(yīng)攔截器實現(xiàn)登陸、權(quán)限校驗
本篇文章主要介紹了AngularJs HTTP響應(yīng)攔截器實現(xiàn)登陸、權(quán)限校驗，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-04-04
本文通過實例代碼給大家介紹了angularjs $parse的相關(guān)知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
AngularJS動態(tài)生成select下拉框的方法實例
這篇文章主要給大家介紹了關(guān)于AngularJS動態(tài)生成select下拉框的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用AngularJS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
AngularJS實現(xiàn)單獨作用域內(nèi)的數(shù)據(jù)操作
這篇文章給大家介紹了利用AngularJs如何實現(xiàn)ng-repeat內(nèi)各個小的子作用域單獨數(shù)據(jù)綁定。有需要的小伙伴們可以參考借鑒，下面來一起看看吧。2016-09-09
這篇文章主要為大家介紹了Angular?@Injectable注解的工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了angularJS中router的使用方法和示例分享,需要的朋友可以參考下2015-02-02
angularjs定時任務(wù)的設(shè)置與清除示例
本篇文章主要介紹了angularjs定時任務(wù)的設(shè)置與清除示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了angularjs中的e2e測試實例,本文使用Protractor來完成e2e測試,需要的朋友可以參考下2014-12-12