Heim > Artikel > Web-Frontend > Erste Schritte mit AngularJS (mit der ng-repeat-Direktive zur Implementierung der Schleife „output_AngularJS“)

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

WBOYOriginal: 2016-05-16 15:02:161659Durchsuche

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>

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Implementieren Sie eine dynamische Suchanzeigefunktion basierend auf jQuery_jqueryNächster Artikel：Implementieren Sie eine dynamische Suchanzeigefunktion basierend auf jQuery_jquery

In Verbindung stehende Artikel

Mehr sehen