快捷導(dǎo)航

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可以返回當(dāng)前引用對象的序號，從0開始，另外還有$first、$middle、$last可以返回布爾值，用于告訴你

當(dāng)前元素是否是集合中的第一個中間的最后一個元素。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解AngularJS控制器的使用
這篇文章主要為大家詳細介紹了AngularJS控制器的使用方法，感興趣的小伙伴們可以參考一下
2016-03-03
AngularJS入門教程之Select(選擇框)詳解
本文主要介紹AngularJS Select,這里給大家整理一些資料詳細講解,并提供實例代碼,有需要的小伙伴參考下
2016-07-07
AngularJS延遲加載html template
這篇文章主要介紹了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簡單驗證功能示例
這篇文章主要介紹了Angular簡單驗證功能,涉及AngularJS事件響應(yīng)、正則判定、頁面元素屬性動態(tài)修改等相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
angularjs實現(xiàn)與服務(wù)器交互分享
AngularJS是Google開發(fā)的純客戶端JavaScript技術(shù)的WEB框架,用于擴展、增強HTML功能,它專為構(gòu)建強大的WEB應(yīng)用而設(shè)計。
2014-06-06
詳解angular應(yīng)用容器化部署
這篇文章主要介紹了詳解angular應(yīng)用容器化部署，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
SpringMVC簡單整合Angular2的示例
這篇文章主要介紹了SpringMVC簡單整合Angular2的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Angular 4.x中表單Reactive Forms詳解
這篇文章主要介紹了Angular 4.x中表單Reactive Forms的相關(guān)資料，文中通過示例代碼介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
2017-04-04
快速學(xué)習(xí)AngularJs HTTP響應(yīng)攔截器
任何時候，如果我們想要為請求添加全局功能，例如身份認證、錯誤處理等，在請求發(fā)送給服務(wù)器之前或服務(wù)器返回時對其進行攔截，是比較好的實現(xiàn)手段
2015-12-12