AngularJS入門（用ng-repeat指令實現(xiàn)循環(huán)輸出
更新時間：2016年05月05日 08:54:00 投稿：wulei
這篇文章主要介紹了AngularJS入門（用ng-repeat指令實現(xiàn)循環(huán)輸出,需要的朋友可以參考下
循環(huán)輸出列表很多項目在web服務端做，前端做好模版后后端寫jsp代碼，雙方需要緊密合作，分清責任。有些項目由后端提供restful方法，前端用ajax調(diào)用自己循環(huán)，這種一般是大把的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>數(shù)量</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指令生命在需要循環(huán)內(nèi)容的元素上，items和控制器上的變量名對應，item是為數(shù)組中單個對象起的別名。$index可以返回當前引用對象的序號，從0開始，另外還有$first、$middle、$last可以返回布爾值，用于告訴你當前元素是否是集合中的第一個中間的最后一個元素。
相關文章
使用AngularJS編寫多選按鈕選中時觸發(fā)指定方法的指令代碼詳解
最近做項目時遇到了需要用到多選按鈕選中觸發(fā)事件的功能，小編試著手寫一個指令，具體實現(xiàn)代碼大家參考下本文吧2017-07-07
Angular6實現(xiàn)拖拽功能指令drag實例詳解
這篇文章主要為大家介紹了Angular6實現(xiàn)拖拽功能指令drag實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要給大家介紹了關于angular8和ngrx8結(jié)合使用的詳細步驟，文中通過示例代碼介紹的非常詳細，對大家學習或者使用angular8具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-12-12
Angualrjs和bootstrap相結(jié)合實現(xiàn)數(shù)據(jù)表格table
這篇文章主要介紹了Angualrjs和bootstrap相結(jié)合實現(xiàn)數(shù)據(jù)表格table,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
Angularjs實現(xiàn)下拉框聯(lián)動的示例代碼
本篇文章主要介紹了Angularjs下拉框聯(lián)動的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
angular中兩種表單的區(qū)別(響應式和模板驅(qū)動表單)
這篇文章主要介紹了angular中兩種表單的區(qū)別(響應式和模板驅(qū)動表單)，詳細的介紹了這兩種表單的實現(xiàn)以及區(qū)別，非常具有實用價值，需要的朋友可以參考下2018-12-12
Angular 4根據(jù)組件名稱動態(tài)創(chuàng)建出組件的方法教程
組件是我們在學習angular中必不可少的一部分，下面這篇文章主要給大家介紹了關于Angular 4如何根據(jù)組件名稱動態(tài)創(chuàng)建出組件的相關資料，文中通過圖文與示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-11-11
下面小編就為大家分享一篇Angular5中調(diào)用第三方js插件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Angular 開發(fā)學習之Angular CLI的安裝使用
這篇文章主要介紹了Angular 開發(fā)學習之Angular CLI的安裝使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
本文主要介紹AngularJS HTML DOM,這里幫大家整理了詳細的資料,并附實例代碼詳細講解,有需要的小伙伴可以參考下2016-07-07