AngularJS ng-repeat遍歷輸出的用法
更新時間：2017年06月19日 16:23:32 作者：Darkersky
本篇文章主要介紹了AngularJS ng-repeat遍歷輸出的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
AngularJS ng-repeat遍歷輸出的用法,最近需要用，就順便發(fā)到隨筆上了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ng-repeat directive</title>
</head>
<body ng-app="myApp">
<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="js/angular-1.3.0.14/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('CartController',function($scope){
$scope.items = [
{name: "蘋果 iPhone7", quantity: 1, price: 5088.00},
{name: "榮耀Magic", quantity: 1, price: 3699.00},
{name: "vivo X9", quantity: 2, price: 2798.00}
];
//$index包含了ng-repeat過程中的循環(huán)計數(shù)
$scope.remove = function (index) {
$scope.items.splice(index, 1);
}
})
</script>
</body>
</html>
ng-repeat指令生命在需要循環(huán)內(nèi)容的元素上，items和控制器上的變量名對應(yīng)，item是為數(shù)組中單個對象起的別名。
$index可以返回當前引用對象的序號，從0開始，另外還有$first、$middle、$last可以返回布爾值，用于告訴你
當前元素是否是集合中的第一個中間的最后一個元素。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- angularJS利用ng-repeat遍歷二維數(shù)組的實例代碼
- AngularJS ng-repeat指令中使用track by子語句解決重復數(shù)據(jù)遍歷錯誤問題
- Angular ng-repeat遍歷渲染完頁面后執(zhí)行其他操作詳細介紹
- Angular ng-repeat 對象和數(shù)組遍歷實例
- AngularJS遍歷獲取數(shù)組元素的方法示例
- angular ng-repeat數(shù)組中的數(shù)組實例
- AngularJS ng-repeat數(shù)組有重復值的解決方法
- AngularJS中比較兩個數(shù)組是否相同
- AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法詳解
相關(guān)文章
這篇文章主要為大家詳細介紹了AngularJS控制器的使用方法，感興趣的小伙伴們可以參考一下2016-03-03
本文主要介紹AngularJS Select,這里給大家整理一些資料詳細講解,并提供實例代碼,有需要的小伙伴參考下2016-07-07
這篇文章主要介紹了AngularJS延遲加載html template 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
angular.js+node.js實現(xiàn)下載圖片處理詳解
這篇文章主要介紹了angular.js+node.js實現(xiàn)下載圖片處理的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要介紹了Angular簡單驗證功能,涉及AngularJS事件響應(yīng)、正則判定、頁面元素屬性動態(tài)修改等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
AngularJS是Google開發(fā)的純客戶端JavaScript技術(shù)的WEB框架,用于擴展、增強HTML功能,它專為構(gòu)建強大的WEB應(yīng)用而設(shè)計。2014-06-06
這篇文章主要介紹了詳解angular應(yīng)用容器化部署，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了SpringMVC簡單整合Angular2的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Angular 4.x中表單Reactive Forms詳解
這篇文章主要介紹了Angular 4.x中表單Reactive Forms的相關(guān)資料，文中通過示例代碼介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
任何時候，如果我們想要為請求添加全局功能，例如身份認證、錯誤處理等，在請求發(fā)送給服務(wù)器之前或服務(wù)器返回時對其進行攔截，是比較好的實現(xiàn)手段2015-12-12