Erste Schritte mit AngularJS (mit der ng-repeat-Direktive zur Implementierung der Schleife „output

Erste Schritte mit AngularJS (mit der ng-repeat-Direktive zur Implementierung der Schleife „output_AngularJS')

WBOY

Freigeben： 2016-05-16 15:02:16

Original

1743 Leute haben es durchsucht

Viele Projekte der Schleifenausgabeliste werden auf dem Webserver durchgeführt. Das Front-End bereitet Vorlagen vor und das Back-End schreibt JSP-Code. Beide Parteien müssen eng zusammenarbeiten, um die Verantwortlichkeiten zu unterscheiden. Einige Projekte bieten erholsame Methoden im Backend, und das Frontend verwendet Ajax, um seine eigene Schleife aufzurufen. Dies erfordert normalerweise viele JQuery-Strings, was zu unintuitiv ist. Einige Leute haben sich JS-Vorlagen ausgedacht, aber sie sind nicht viel besser.

Es ist viel besser, AngularJS zu verwenden, die Syntax ähnelt 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>

Nach dem Login kopieren

Die ng-repeat-Direktive basiert auf dem Element, dessen Inhalt dem Variablennamen auf dem Controller entspricht und einem Alias für ein einzelnes Objekt im Array entspricht. $index kann die Seriennummer des aktuellen Referenzobjekts zurückgeben, beginnend bei 0. Darüber hinaus können $first, $middle und $last boolesche Werte zurückgeben, um Ihnen mitzuteilen, ob das aktuelle Element das erste, mittlere und letzte Element ist Element in der Sammlung.