Heim > Web-Frontend > js-Tutorial > AngularJS verwendet die ng-repeat-Direktive, um Dropdown-Boxen zu implementieren

AngularJS verwendet die ng-repeat-Direktive, um Dropdown-Boxen zu implementieren

高洛峰
Freigeben: 2016-12-29 10:35:54
Original
1104 Leute haben es durchsucht

Mit ng-repeat von AngularJs können wir Arrays sehr bequem durchqueren, um DOM-Elemente zu generieren, aber eine unsachgemäße Verwendung kann auch zu Leistungsproblemen führen. Lassen Sie mich mit Ihnen teilen, wie Sie die ng-repeat-Direktive verwenden, um ein Dropdown-Feld im Projekt zu implementieren.

1. Problemhintergrund

Die Optionen im Auswahl-Dropdown-Feld werden in einem Dropdown-Feld zusammengefasst. Hier wird die ng-repeat-Anweisung zum Erstellen von

2. Implementierungsquellcode

<!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>
Nach dem Login kopieren
3. Beschreibung des Problems

ng-repeat-Anweisung kann Daten wiederholen

AngularJS verwendet die ng-repeat-Direktive, um Dropdown-Boxen zu implementieren

Das Obige ist die AngularJS-Verwendung, die Ihnen der Herausgeber vorgestellt hat. Die ng-repeat-Anweisung implementiert das Dropdown-Feld. Ich hoffe, dass es für alle hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!


Weitere verwandte Artikel über AngularJS mit der ng-repeat-Direktive zum Implementieren von Dropdown-Boxen finden Sie auf der chinesischen PHP-Website!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage