Dieses Mal werde ich Ihnen AngularJS zeigen, wie Sie die Datenquelle zyklisch ausgeben und welche Vorsichtsmaßnahmen für die zyklische Ausgabe der AngularJS-Datenquelle gelten Fall, werfen wir einen Blick darauf.
Schleifenausgabe der Datenquelle in AngularJS
Ich bin erst kürzlich mit dem Angular Front-End Framework in Kontakt gekommen, aber nachdem ich es einige Tage lang verwendet habe, habe ich das Gefühl, dass der Effekt offensichtlicher ist, insbesondere im Hinblick auf den Datenausgabeeffekt, der größer ist effizienter als die native js Programmierung Viel höher, daher benötigen viele Unternehmen eine Front-End-Entwicklung, mit der Sie mit der Verwendung von Front-End-Frameworks vertraut sein müssen, was die Effizienz des Projekts schneller verbessern kann. Worüber ich heute sprechen möchte, ist die Schleifenausgabe von Datenquellen bei Verwendung des Angular Front-End-Frameworks.
Schleifen Sie die Daten im Array auf die Seite. Wenn Sie die js-Methode verwenden, müssen Sie eine for-Schleife für das Array ausführen und diese im DOM auf der Seite ausgeben Knoten in der Ebene werden bedient, und wenn Sie das Front-End-Framework (Angular) verwenden, sind die Anweisungen für die Datenschleifenausgabe, also ng-repeat, bereits gekapselt.
<ul>
<li ng-class="idx==$index?'color1':'color2'" ng-repeat=" item in book track by $index">{{item.name}}{{$index}}</li>
</ul>Dies dient dazu, die Daten im Array-Buch auszuschleifen. Die im Framework gepackten Anweisungen sind alle eindeutig und mit ng- davor gekennzeichnet, genau wie bei der Verwendung der Anweisungen in der WeChat-Entwicklung steht wx- davor. Den gleichen Effekt benennen und veranschaulichen.
Wenn Ihre Benutzeroberfläche jedoch das Wechseln von Registerkarten erfordert, sieht die Benutzeroberfläche möglicherweise so aus, als ob die linke Seite die Kategorie und die rechte Seite die Daten enthält, die der spezifischen Kategorie entsprechen. Das heißt, Ihre Daten ähneln möglicherweise
$scope.book=[{idx:7,name:"军事",value:[{name:'美国的城市政治',price:37},{name:'兵法简述',price:45},{name:'国防论',price:14},{name:'总体战',price:13},{name:'海军战略论',price:11}]},
{idx:8,name:"情感",value:[{name:'三体',price:12}]}]Wie bestimmte Daten, die dem Militär entsprechen, auf der Schnittstelle angezeigt werden oder bestimmte Daten, die Emotionen entsprechen, auf der Schnittstelle angezeigt werden, besteht tatsächlich darin, die Daten entsprechend der Klassifizierung der Daten zu klassifizieren und auszugeben
<ul>
<li ng-repeat=" item in book track by $index">
<ul>
<li ng-class="'color2'" ng-repeat=" items in item.value|page:nowpage:3">
{{items.name}}
<span class="price">价格：{{items.price|currency:'￥'}}</span>
<button ng-click="add($index)">添加至购物车</button>
</li>
</ul>
</li>
</ul>Der Effekt dieser Ausgabe besteht darin, die Daten entsprechend der Klassifizierung in den Daten zu klassifizieren, d. h. eine zweistufige verschachtelte Schleife. Die Daten in der zweiten Schleifenebene sind das Ergebnis nach der ersten Schleife, sodass eine Datenkategorie entsteht Kann an UL unter LI ausgegeben werden und dann die spezifischen Daten in der Kategorie zur Ausgabe durchlaufen
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
JS implementiert eine einfache 24-Stunden-Uhr
Promise implementiert eine asynchrone Implementierung
Das obige ist der detaillierte Inhalt vonSo führen Sie eine Schleife der Ausgabe einer AngularJS-Datenquelle durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
