AngularJS入門（以ng-repeat指令實作迴圈輸出_AngularJS
- WBOY原創
- 2016-05-16 15:02:161749瀏覽
循環輸出清單很多項目在web服務端做，前端做好模版後後端寫jsp程式碼，雙方需要緊密合作，分清責任。有些專案由後端提供restful方法，前端用ajax呼叫自己循環，這種一般是大把的jquery拼字符串，太不直觀，有人搞出了js模板，也沒好到哪裡去。
用AngularJS就爽多了，文法和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>
ng-repeat指令生命在需要循環內容的元素上，items和控制器上的變數名稱對應，item是為數組中單一物件起的別名。 $index可以傳回目前引用物件的序號，從0開始，另外還有$first、$middle、$last可以傳回布林值，用來告訴你目前元素是否是集合中的第一個中間的最後一個元素。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn