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

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

WBOY

Libérer： 2016-05-16 15:02:16

original

1732 Les gens l'ont consulté

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>

Copier après la connexion

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.