recherche

Maison  >  Article  >  interface Web  >  Premiers pas avec AngularJS (en utilisant la directive ng-repeat pour implémenter la boucle output_AngularJS

Premiers pas avec AngularJS (en utilisant la directive ng-repeat pour implémenter la boucle output_AngularJS

WBOY
WBOYoriginal
2016-05-16 15:02:161713parcourir

De nombreux projets de liste de sortie de boucle sont réalisés sur le serveur Web. Le front-end prépare les modèles et le back-end écrit le code jsp. Les deux parties doivent travailler en étroite collaboration pour séparer les responsabilités. Certains projets fournissent des méthodes reposantes sur le backend, et le frontend utilise ajax pour appeler sa propre boucle. Cela implique généralement beaucoup de chaînes jquery, ce qui est trop peu intuitif. Certaines personnes ont proposé des modèles js, mais ils ne sont pas bien meilleurs.

C'est bien mieux d'utiliser AngularJS, la syntaxe est similaire à JSP : 

<!doctype html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <title>ng-repeat directive</title>
</head>
<body>
<table ng-controller="CartController">
  <caption>我的购物车</caption>
  <tr>
    <th>序号</th>
    <th>商品</th>
    <th>单价</th>
    <th>数量</th>
    <th>金额</th>
    <th>操作</th>
  </tr>
  <tr ng-repeat="item in items">
    <td>{{$index + 1}}</td>
    <td>{{item.name}}</td>
    <td>{{item.price | currency}}</td>
    <td><input ng-model="item.quantity"></td>
    <td>{{item.quantity * item.price | currency}}</td>
    <td>
      <button ng-click="remove($index)">Remove</button>
    </td>
  </tr>
</table>
 
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
  function CartController($scope) {
    $scope.items = [
      {name: "雷柏（Rapoo） V500 机械游戏键盘 机械黄轴", quantity: 1, price: 199.00},
      {name: "雷柏（Rapoo） V20 光学游戏鼠标 黑色烈焰版", quantity: 1, price: 139.00},
      {name: "AngularJS权威教程", quantity: 2, price: 84.20}
    ];
 
    $scope.remove = function (index) {
      $scope.items.splice(index, 1);
    }
  }
</script>
</body>
</html>

La directive ng-repeat réside sur l'élément qui doit boucler le contenu des éléments qui correspond au nom de la variable sur l'élément du contrôleur est un alias pour un seul objet dans le tableau. $index peut renvoyer le numéro de série de l'objet de référence actuel, à partir de 0. De plus, $first, $middle et $last peuvent renvoyer des valeurs booléennes pour vous indiquer si l'élément actuel est le premier, le milieu et le dernier. élément de la collection.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Implémenter la fonction d'affichage de recherche dynamique basée sur jQuery_jqueryArticle suivant：Implémenter la fonction d'affichage de recherche dynamique basée sur jQuery_jquery

Articles Liés

Voir plus