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

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

高洛峰Original: 2016-12-29 10:35:541069Durchsuche

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>

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!

Stellungnahme：

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

Vorheriger Artikel：Angularjs implementiert Beispielcode für das Auswahl-Dropdown-Feld mit Such- und FilterfunktionNächster Artikel：Angularjs implementiert Beispielcode für das Auswahl-Dropdown-Feld mit Such- und Filterfunktion

In Verbindung stehende Artikel

Mehr sehen