Bermula dengan AngularJS (menggunakan arahan ng-repeat untuk melaksanakan output gelung

Bermula dengan AngularJS (menggunakan arahan ng-repeat untuk melaksanakan output gelung_AngularJS

WBOY

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

asal

1748 orang telah melayarinya

Banyak projek senarai keluaran gelung dilakukan pada pelayan web Bahagian hadapan menyediakan templat dan bahagian belakang menulis kod jsp Kedua-dua pihak perlu bekerja rapat untuk membezakan tanggungjawab. Sesetengah projek menyediakan kaedah yang tenang pada bahagian belakang, dan bahagian hadapan menggunakan ajax untuk memanggil gelung sendiri Ini biasanya melibatkan banyak rentetan jquery, yang terlalu tidak intuitif Sesetengah orang telah menghasilkan templat js, tetapi mereka tidak lebih baik.

Lebih baik menggunakan AngularJS, sintaksnya serupa dengan 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>

Salin selepas log masuk

Arahan ng-ulang hidup pada elemen yang perlu menggelungkan kandungan item sepadan dengan nama pembolehubah pada pengawal ialah alias untuk satu objek dalam tatasusunan. $index boleh mengembalikan nombor siri objek rujukan semasa, bermula dari 0. Selain itu, $first, $middle, dan $last boleh mengembalikan nilai Boolean untuk memberitahu anda sama ada elemen semasa ialah yang pertama, tengah dan terakhir elemen dalam koleksi.