AngularJS使用ng-repeat指令實作下拉框
- 高洛峰原創
- 2016-12-29 10:35:541099瀏覽
AngularJs 的 ng-repeat 讓我們非常方便的遍歷數組產生 Dom 元素，但是使用不當也會有效能問題。以下跟大家分享在專案中使用ng-repeat指令實作下拉方塊。
1、問題背景
select下拉框裡option組裝成下拉框，這裡利用ng-repeat指令來創建
2、實作源碼
<!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、問題說明
指令可以重複指令
以上所述是小編給大家介紹的AngularJS使用ng-repeat指令實現下拉框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對PHP中文網的支持！
更多AngularJS使用ng-repeat指令實現下拉框相關文章請關注PHP中文網！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn