<!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. Atitit 语音识别的技术原理

    Atitit 语音识别的技术原理 1.1. 语音识别技术,也被称为自动语音识别Automatic Speech Recognition,(ASR),2 1.2. 模型目前,主流的大词汇量语音识别系统多 ...

  2. 【管理心得之三十二】PMP杂谈---------爱情必胜术

    这次一反常态,没有场景设计,我想借此文普及一下PMP是什么? 但我不知道这样枯燥的话题能否能引起你的兴趣,我不得不套用“标题党”<爱情必胜术>来博你眼球. 我真没有说谎,此文是献给那些孤身 ...

  3. GridView和DATAGRID前后台查询用法的比较

    Grideview前台: <DIV class="mainDiv" id="GridWidth"> <ASP:GridView id=&quo ...

  4. MongoDB 简介

    MongoDB 简介 介绍:MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.特点:高性能.易部署.易使用,存储数据非常方便.主要功 ...

  5. DataTable转换成json字符串

    将DataTable里面的行转换成json字符串方法: #region DataTable转为json /// <summary> /// DataTable转为json /// < ...

  6. JQuery判断数组中是否包含某个元素$.inArray("元素字符串", 数组名称);

    var arry = [ "C#", "html", "css", "JavaScript" ]; var result ...

  7. [转] SSH原理与运用（2）：远程操作与端口转发

    英文:阮一峰 链接:http://www.ruanyifeng.com/blog/2011/12/ssh_port_forwarding.html 接着前一次的文章,继续介绍SSH的用法. (Imag ...

  8. ISO语言代码

    // Language ISO Code Abkhazian ab Afar aa Afrikaans af Albanian sq Amharic am Arabic ar Armenian hy ...

  9. 数据可视化(7)--D3基础

    一直想写写D3,觉得D3真心比较强大,基本上你能想出来的图表都能绘制出来,只不过使用起来比前几个要稍麻烦一点. 正好最近读完了<数据可视化实战>,将关于D3的知识梳理了一遍,写这篇博客记录 ...

  10. 一种利用 Cumulative Penalty 训练 L1 正则 Log-linear 模型的随机梯度下降法

    Log-Linear 模型(也叫做最大熵模型)是 NLP 领域中使用最为广泛的模型之一,其训练常采用最大似然准则,且为防止过拟合,往往在目标函数中加入(可以产生稀疏性的) L1 正则.但对于这种带 L ...