欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

  • 關(guān)于AngularJs數(shù)據(jù)的本地存儲詳解

    關(guān)于AngularJs數(shù)據(jù)的本地存儲詳解

    本文主要介紹了每一個獨立的JS文件或者不同的控制器如何實現(xiàn)數(shù)據(jù)的共享與交互的方法。具有一定的參考價值，下面跟著小編一起來看下吧
    2017-01-01
  • 使用AngularJS對表單提交內(nèi)容進(jìn)行驗證的操作方法

    使用AngularJS對表單提交內(nèi)容進(jìn)行驗證的操作方法

    AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過本文給大家分享使用AngularJS對表單提交內(nèi)容進(jìn)行驗證的操作方法，需要的的朋友參考下吧
    2017-07-07
  • AngularJS基礎(chǔ) ng-readonly 指令簡單示例

    AngularJS基礎(chǔ) ng-readonly 指令簡單示例

    本文主要介紹AngularJS ng-readonly 指令,這里對ng-readonly指令的資料做了整理，有學(xué)習(xí)AngularJS 指令的同學(xué)可以參考下
    2016-08-08
  • 詳解Angular的8個主要構(gòu)造塊

    詳解Angular的8個主要構(gòu)造塊

    Angular 主要分為八大構(gòu)造塊（也就是八個核心概念）：模塊、組件、模板、元數(shù)據(jù)、數(shù)據(jù)綁定、指令、服務(wù)、依賴注入。有興趣的可以了解一下
    2017-06-06
  • 簡述AngularJS的控制器的使用

    簡述AngularJS的控制器的使用

    這篇文章主要介紹了AngularJS的控制器的使用,文中給出了具體的用于HTML中的對象示例,需要的朋友可以參考下
    2015-06-06
  • AngularJS過濾器filter用法總結(jié)

    AngularJS過濾器filter用法總結(jié)

    這篇文章主要介紹了AngularJS過濾器filter用法,結(jié)合實例形式較為詳細(xì)的總結(jié)分析了過濾器filter的功能、分類、使用技巧及自定義過濾器的實現(xiàn)方法,需要的朋友可以參考下
    2016-12-12
  • 對比分析AngularJS中的$http.post與jQuery.post的區(qū)別

    對比分析AngularJS中的$http.post與jQuery.post的區(qū)別

    這篇文章主要給大家對比分析AngularJS中的$http.post與jQuery.post的區(qū)別，十分的詳細(xì)，是篇非常不錯的文章，這里推薦給小伙伴們。
    2015-02-02
  • Bootstrap和Angularjs配合自制彈框的實例代碼

    Bootstrap和Angularjs配合自制彈框的實例代碼

    今天小編通過本文給大家分享Bootstrap和Angularjs配合自制彈框的實例代碼，代碼簡單易懂，有需要的朋友跟著小編一起學(xué)習(xí)
    2016-08-08
  • Angular簡單驗證功能示例

    Angular簡單驗證功能示例

    這篇文章主要介紹了Angular簡單驗證功能,涉及AngularJS事件響應(yīng)、正則判定、頁面元素屬性動態(tài)修改等相關(guān)操作技巧,需要的朋友可以參考下
    2017-12-12
  • Angular.Js中ng-include指令的使用與實現(xiàn)

    Angular.Js中ng-include指令的使用與實現(xiàn)

    ng-include 指令用于包含外部的 HTML 文件。包含的內(nèi)容將作為指定元素的子節(jié)點。下面這篇文章主要給大家介紹了Angular.Js中ng-include指令的使用與實現(xiàn)的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面來一起看看吧。
    2017-05-05

最新評論