<!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. 爱上MVC~为DisplayNameFor添加扩展，支持PagedList集合

    回到目录 DisplayNameFor方法是MVC提供给我们的,它可以将模型的DisplayName特性的值显示到页面上,这对程序员来说很是方便,在进行实体设计时,可以指定它的显示名称,然后MVC引擎 ...

  2. iOS 屏幕适配:autoResizing autoLayout和sizeClass

    1. autoResizing autoresizing是苹果早期的ui布局适配的解决办法,iOS6之前完全可以胜任了,因为苹果手机只有3.5寸的屏幕,在加上手机app很少支持横屏,所以iOS开发者基 ...

  3. javascript_core_02之函数、作用域

    1.函数:封装一项任务步骤清单的代码段: ①声明:function 函数名(参数列表){ 步骤清单代码:return 返回值:} ②返回值:使调用者获得函数执行结果,return只返回,不保存: ③存 ...

  4. VUX 移动前端框架使用文档

    VUX 移动前端框架使用文档 https://owlaford.gitbooks.io/vux-mobile-framework/content/index.html

  5. TSQL order by 子句中排序列的多种写法

    Order by 子句用于对结果进行排序,执行顺序位于select子句之后,排序列有4中写法: column_name column_alias,由于order by子句的执行顺序位于select子句 ...

  6. java错误

    Workspace in use or cannot be created, choose a different one. 出现这种情况一般是workspace的配置文件中出现了.lock文件(wo ...

  7. 后端码农谈前端（CSS篇）第四课：选择器补充（伪类与伪元素）

    一.伪类: 属性 描述 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接 ...

  8. RAC碎碎念

    1. 如何查看Oracle是否启动了RAC.  SQL> show parameter cluster_database; NAME TYPE VALUE ------------------- ...

  9. SQLServer学习笔记系列4

    一.写在前面的话 好多天没有记录sql学习笔记了,要坚持下去,坚信每一点的进步都是为在积蓄力量.今天看到一幅图,特此分享出来. 通过这幅图,我看到的是每人站在自己的角度看问题,感受是不一样的,就如同学 ...

  10. Cordova webapp实战开发：（1）为什么选择 Cordova webapp？

    很长时间没有专注写代码了,即使写点代码也主要是写写敏捷个人app,这个App主体内容是我用了一周的时间,使用PhoneGap+JQueryMobile搭建的,之所以会比较快的完成,是因为11年我在做建 ...