Comment boucler la sortie de la source de données AngularJS

Cette fois, je vais vous expliquer AngularJS comment sortir cycliquement la source de données et quelles sont les précautions pour la sortie cyclique de la source de données AngularJS. Ce qui suit est un exemple pratique. cas, jetons un coup d'oeil.

Sortie en boucle de la source de données dans AngularJS

Je viens d'entrer en contact avec le framework front-end angulaire récemment, mais après l'avoir utilisé pendant quelques jours, j'ai l'impression que l'effet est plus évident, notamment en termes d'effet de sortie de données, qui est plus efficace que la programmation js native Beaucoup plus élevée, c'est pourquoi de nombreuses entreprises exigent un développement front-end avec lequel vous devez être familiarisé avec l'utilisation de frameworks front-end, ce qui peut améliorer l'efficacité du projet plus rapidement. Ce dont je veux parler aujourd'hui, c'est la sortie en boucle des sources de données lors de l'utilisation du framework frontal angulaire.

​​​​ Bouclez les données du tableau vers la page. Si vous utilisez la méthode js, vous devez effectuer une boucle for sur le tableau et la transmettre au DOM dans la page. les nœuds de la couche sont exploités, et si vous utilisez le framework frontal (angulaire), il a déjà encapsulé les instructions pour la sortie de la boucle de données, c'est-à-dire ng-repeat.

<ul>
  <li ng-class="idx==$index?&#39;color1&#39;:&#39;color2&#39;" ng-repeat=" item in book track by $index">{{item.name}}{{$index}}</li>
</ul>

Voici la sortie en boucle des données dans le livre de tableaux. Les instructions encapsulées dans le framework sont toutes uniques et marquées par ng- devant elles, tout comme lors de l'utilisation des instructions dans le développement WeChat, il y a wx- devant elles. . Pour étiqueter et illustrer le même effet.

                      Mais si votre interface implique de changer d'onglet, l'interface peut apparaître comme si le côté gauche était la catégorie et le côté droit les données correspondant à la catégorie spécifique, c'est-à-dire que vos données peuvent être similaires à

$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}]}]

Comment afficher des données spécifiques correspondant aux affaires militaires sur l'interface, ou afficher des données spécifiques correspondant aux émotions sur l'interface, consiste en fait à classer et à sortir les données selon la classification des données

<ul>
  <li ng-repeat=" item in book track by $index">
    <ul>
      <li ng-class="&#39;color2&#39;" 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>

L'effet de cette sortie est de classer les données selon la classification dans les données, c'est-à-dire une boucle imbriquée à deux couches. Les données de la deuxième couche de boucle sont le résultat après la première boucle, de sorte qu'une catégorie de données. peut être sorti vers ul sous li, puis boucler les données spécifiques de la catégorie à sortir

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à. d'autres articles connexes sur le site PHP chinois !

Lecture recommandée :

JS implémente une simple horloge de 24 heures

Promise implémente une implémentation asynchrone

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!