<!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. thinkphp里的session、cookie方法

    thinkphp里,对于session和cookie的操作,不管是存值.获取.删除,均只有一个方法.现分享出来,供大家参考参考. /** * session管理函数 * @param string|a ...

  2. Atitit 发帖机系列（6） USRQBN2201 setup spec安装程序的实现规范与标准化解决方案

    Atitit 发帖机系列(6) USRQBN2201 setup spec安装程序的实现规范与标准化解决方案 安装主要解决一个问题,就是resin的内容启动路径以及端口..这里是使用的端口8077 主 ...

  3. Piwik延迟加载脚本

    piwik有时候会卡页面,为了不影响页面,可以将Piwik代码放到最后加载 <!-- Piwik --> <script type="text/javascript&quo ...

  4. iOS-Objective-C内存管理

    内存管理: 栈区 [stack]:由编译器自动分配并释放,一般存放函数的参数值,局部变量等 堆区 [heap]:由程序员分配和释放,如果程序员不释放,程序结束时,可能会由操作系统回收 全局区(静态区) ...

  5. asp.net的简易的参数化查询

    protected void btnInsert_Click(object sender, EventArgs e) { string sql = "insert into contactg ...

  6. 体验WP 8.1 Update1开发不一定要更新VS2013 Update3

    WP 8.1开发者预览版,估计大家也用得很High了,最近,MS推送了Update,主要的东西,不用说,就是最近被说得很火的小娜(Cortana),其实在推Update前几天,还有过一次小更新,当然我 ...

  7. JavaScript的陷阱

    这本来是翻译Estelle Weyl的<15 JavaScript Gotchas>,里面介绍的都是在JavaScript编程实践中平时容易出错或需要注意的地方,并提供避开这些陷阱的方法, ...

  8. socket编程的select模型

    在掌握了socket相关的一些函数后,套接字编程还是比较简单的,日常工作中碰到很多的问题就是客户端/服务器模型中,如何让服务端在同一时间高效的处理多个客户端的连接,我们的处理办法可能会是在服务端不停的 ...

  9. poj1330Nearest Common Ancestors 1470 Closest Common Ancestors（LCA算法）

    LCA思想:http://www.cnblogs.com/hujunzheng/p/3945885.html 在求解最近公共祖先为问题上,用到的是Tarjan的思想,从根结点开始形成一棵深搜树,非常好 ...

  10. 《BI那点儿事》Microsoft 决策树算法——找出三国武将特性分布，献给广大的三国爱好者们

    根据游戏<三国志11>武将数据,利用决策树分析,找出三国武将特性分布.其中变量包括统率.武力.智力.政治.魅力.身分.变量说明:统率:武将带兵出征时的部队防御力.统帅越高受到普通攻击与兵法 ...