<!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>数量</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过程中的循环计数

         $scope.remove = function (index) {

             $scope.items.splice(index, 1);

         }

     })

 </script>

 </body>

 </html>

ng-repeat指令生命在需要循环内容的元素上，items和控制器上的变量名对应，item是为数组中单个对象起的别名。

$index可以返回当前引用对象的序号，从0开始，另外还有$first、$middle、$last可以返回布尔值，用于告诉你

当前元素是否是集合中的第一个中间的最后一个元素。

AngularJS例子 ng-repeat遍历输出 通过js的splice方法删除当前行的更多相关文章

  1. JS的splice()方法在for循环中使用可能会遇到的坑

    在写JS代码时,我们常常使用 splice 函数来删除数组中的元素,因为 splice 函数会直接对数组进行修改,从而不需再自己写一个算法来移动数组中的其他元素填补到被删除的位置.splice 功能十 ...

  2. （转）JS的splice()方法在for循环中的使用问题

    在写JS代码时,我们常常使用 splice 函数来删除数组中的元素,因为 splice 函数会直接对数组进行修改,从而不需再自己写一个算法来移动数组中的其他元素填补到被删除的位置.splice 功能十 ...

  3. 关于js中splice方法返回的结果

    一.前言 刚刚在使用splice()方法,发现这个方法返回的是删除后的数组元素,如果要获取删除指定元素后的数组,直接调用原来的数组即可!因为splice()会改变原来数组!之前对splice()方法一 ...

  4. angularJS入门小Demo【简单测试js代码的方法】

    1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...

  5. js的splice方法

    splice是js原生处理数组的方法,可以在不改变引用的情况下对数组处理 arrayObject.splice(index,howmany,item1,.....,itemX)参数 描述index 必 ...

  6. JS中splice方法的使用

    在js中,arr.splice(str)方法是处理数组的利器,利用它可以实现在指定位置删除.替换.插入指定数量的元素. 其语法为:  arr.splice(index[, deleteCount, e ...

  7. js 数组去重方法总结

    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, ...

  8. js对象遍历输出顺序错乱的问题

    一.js对象遍历顺序错乱的原因 下边就来实践一下: var obj={'3':'ccc',name:'abc',age:23,school:'sdfds',class:'dfd',hobby:'dsf ...

  9. js数组及数组应用（冒泡和二分，遍历输出）

    一.定义:1)var arr=new Array(); 加数据:arr[0]=1; 2)定义同时赋值:var arr=new Array(1,2,3,4,5); 3)调用:var arr=new Ar ...

随机推荐

  1. 知方可补不足~Sqlserver发布订阅与sql事务的关系

    回到目录 前几讲说了一下通过sqlserver的发布与订阅来实现数据的同步,再通过EF这个ORM架构最终实现架构系统的读写分离,而在使用发布与订阅来实现数据同步时,需要我们注意几点,那就是当操作被使用 ...

  2. C#学习系列-类与结构的区别

    参考:http://www.microsoftvirtualacademy.com/Content/ViewContent.aspx?et=9851&m=9830&ct=31038 如 ...

  3. jQuery LigerUI 最新版压缩包（含chm帮助文档、源码、donet权限示例）

    jQuery LigerUI 最新版压缩包 http://download.csdn.net/download/heyin12345/4680593 jQuery LigerUI 最新版压缩包(含ch ...

  4. 手机页面的 HTML<meta> 标签使用与说明

    name="viewport" 设置窗口(网页可绘制的区域) width="device-width" 应用宽与屏幕的宽一样的 (height同width) i ...

  5. Python数据类型之“序列概述与基本序列类型(Basic Sequences)”

    序列是指有序的队列,重点在"有序". 一.Python中序列的分类 Python中的序列主要以下几种类型: 3种基本序列类型(Basic Sequence Types):list. ...

  6. 快速入门系列--MySQL

    一直说要好好复习一下Mysql都木有时间,终于赶上最近新购买了阿里云,决定使用CentOS去试试.NET Core等相关的开发,于是决定好好的回顾下这部分知识,由于Mysql的数据库引擎是插件式的,对 ...

  7. Topology and Geometry in OpenCascade-Edge

    Topology and Geometry in OpenCascade-Edge eryar@163.com 摘要Abstract:本文简要介绍了几何造型中的边界表示法(BRep),并结合程序说明O ...

  8. WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Scr ...

  9. java中异常注意问题（发生在多态是的异常问题）

    /* 异常的注意事项: 1,子类在覆盖父类方法时,父类的方法如果抛出了异常,那么子类的方法只能抛出父类的异常或者该异常的子类. 2,如果父类抛出多个异常,那么子类只能抛出父类异常的子集. 简单说:子类 ...

  10. JavaScript垃圾回收（三）——内存泄露

    一.JavaScript内存监测工具 在讨论内存泄露之前,先介绍几款JavaScript内存监测工具. IE的sIEve与JSLeaksDetector(这两个可以在下面的附件中下载),firefox ...