cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bermula dengan AngularJS (menggunakan arahan ng-repeat untuk melaksanakan output gelung_AngularJS

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

WBOY
WBOYasal
2016-05-16 15:02:161711semak imbas

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>

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Laksanakan fungsi paparan carian dinamik berdasarkan jQuery_jqueryArtikel seterusnya：Laksanakan fungsi paparan carian dinamik berdasarkan jQuery_jquery

Artikel berkaitan

Lihat lagi