快捷導(dǎo)航

AngularJS ng-repeat遍歷輸出的用法

更新時(shí)間：2017年06月19日 16:23:32 作者：Darkersky

本篇文章主要介紹了AngularJS ng-repeat遍歷輸出的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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>序號(hào)</th>
    <th>商品</th>
    <th>單價(jià)</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)計(jì)數(shù)
    $scope.remove = function (index) {
      $scope.items.splice(index, 1);
    }
  })
</script>
</body>
</html>

ng-repeat指令生命在需要循環(huán)內(nèi)容的元素上，items和控制器上的變量名對(duì)應(yīng)，item是為數(shù)組中單個(gè)對(duì)象起的別名。

$index可以返回當(dāng)前引用對(duì)象的序號(hào)，從0開始，另外還有$first、$middle、$last可以返回布爾值，用于告訴你

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

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

您可能感興趣的文章:

相關(guān)文章

關(guān)于AngularJs數(shù)據(jù)的本地存儲(chǔ)詳解
本文主要介紹了每一個(gè)獨(dú)立的JS文件或者不同的控制器如何實(shí)現(xiàn)數(shù)據(jù)的共享與交互的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法
AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過本文給大家分享使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法，需要的的朋友參考下吧
2017-07-07
AngularJS基礎(chǔ) ng-readonly 指令簡單示例
本文主要介紹AngularJS ng-readonly 指令,這里對(duì)ng-readonly指令的資料做了整理，有學(xué)習(xí)AngularJS 指令的同學(xué)可以參考下
2016-08-08
詳解Angular的8個(gè)主要構(gòu)造塊
Angular 主要分為八大構(gòu)造塊（也就是八個(gè)核心概念）：模塊、組件、模板、元數(shù)據(jù)、數(shù)據(jù)綁定、指令、服務(wù)、依賴注入。有興趣的可以了解一下
2017-06-06
簡述AngularJS的控制器的使用
這篇文章主要介紹了AngularJS的控制器的使用,文中給出了具體的用于HTML中的對(duì)象示例,需要的朋友可以參考下
2015-06-06
AngularJS過濾器filter用法總結(jié)
這篇文章主要介紹了AngularJS過濾器filter用法,結(jié)合實(shí)例形式較為詳細(xì)的總結(jié)分析了過濾器filter的功能、分類、使用技巧及自定義過濾器的實(shí)現(xiàn)方法,需要的朋友可以參考下
2016-12-12
對(duì)比分析AngularJS中的$http.post與jQuery.post的區(qū)別
這篇文章主要給大家對(duì)比分析AngularJS中的$http.post與jQuery.post的區(qū)別，十分的詳細(xì)，是篇非常不錯(cuò)的文章，這里推薦給小伙伴們。
2015-02-02
Bootstrap和Angularjs配合自制彈框的實(shí)例代碼
今天小編通過本文給大家分享Bootstrap和Angularjs配合自制彈框的實(shí)例代碼，代碼簡單易懂，有需要的朋友跟著小編一起學(xué)習(xí)
2016-08-08
Angular簡單驗(yàn)證功能示例
這篇文章主要介紹了Angular簡單驗(yàn)證功能,涉及AngularJS事件響應(yīng)、正則判定、頁面元素屬性動(dòng)態(tài)修改等相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
Angular.Js中ng-include指令的使用與實(shí)現(xiàn)
ng-include 指令用于包含外部的 HTML 文件。包含的內(nèi)容將作為指定元素的子節(jié)點(diǎn)。下面這篇文章主要給大家介紹了Angular.Js中ng-include指令的使用與實(shí)現(xiàn)的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面來一起看看吧。
2017-05-05