<!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. 中小公司PMO不一样期间的责任

    中小公司,又称中小型公司或中小企,它是与所在行业的大公司对比在人员规划.财物规划与运营规划上都对比小的经济单位.此类公司一般可由单自个或少数人供给资金构成,其招聘人数与营业额皆不大,因此在运营上多半是 ...

  2. spring 学习

    一.spring框架介绍 Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组件,同时为 J2EE 应用程序开发提供 ...

  3. Java 线程 — ThreadLocal

    ThreadLocal 先来看看ThreadLocal的注释: This class provides** thread-local variables**. These variables diff ...

  4. PHP将富文本编辑后的内容，去除样式图片等只保留txt文本内容

    1.从数据库读取富文本内容样式如下: <p style=";text-indent: 0;padding: 0;line-height: 26px"><span ...

  5. 蓝牙4.0 BLE基础之vdd检测new

    外部ADC通道,我们现在用的是A0脚,也就是P00通道 把它设置成输出的一个模式.在程序中设置,代码如下: #include <ioCC2540.h> #define HAL_ADC_RE ...

  6. SQL Server的小数数值类型（float 和 decimal）用法

    在SQL Server中,小数数值实际上只有两种数据类型:float 和 decimal.double precision 整体是数据类型,等价于 float(53),real等价于float(24) ...

  7. js之滚动置顶效果

    0.js获取高度 ? 1 2 3 4 5 6 document.all   // 只有ie认识   document.body.clientHeight              // 文档的高,屏幕 ...

  8. The Triumph Of Bio-logic

    理性技术的局限 机械逻辑 人造机械的构成逻辑,比如说钟表的制作原理.是一种可被人类掌握的,可推演的理论. 生物逻辑 一个有机系统的构成逻辑.比如说草原.细胞.大脑等这些系统的存在所依托的逻辑,我们成为 ...

  9. nodejs 生产环境配置

    1.node 默认为development(开发)模式 启动node 时可以设置模式为生产模式 set NODE_ENV=production node app.js 2.设置node监听的端口 va ...

  10. Android TextView 添加下划线的几种方式

    总结起来大概有5种做法:  1. 将要处理的文字写到一个资源文件,如string.xml(使用html用法格式化)   2. 当文字中出现URL.E-mail.电话号码等的时候,可以将TextView ...