AngularJS例子 ng-repeat遍历输出 通过js的splice方法删除当前行
<!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方法删除当前行的更多相关文章
- JS的splice()方法在for循环中使用可能会遇到的坑
在写JS代码时,我们常常使用 splice 函数来删除数组中的元素,因为 splice 函数会直接对数组进行修改,从而不需再自己写一个算法来移动数组中的其他元素填补到被删除的位置.splice 功能十 ...
- （转）JS的splice()方法在for循环中的使用问题
在写JS代码时,我们常常使用 splice 函数来删除数组中的元素,因为 splice 函数会直接对数组进行修改,从而不需再自己写一个算法来移动数组中的其他元素填补到被删除的位置.splice 功能十 ...
- 关于js中splice方法返回的结果
一.前言 刚刚在使用splice()方法,发现这个方法返回的是删除后的数组元素,如果要获取删除指定元素后的数组,直接调用原来的数组即可!因为splice()会改变原来数组!之前对splice()方法一 ...
- angularJS入门小Demo【简单测试js代码的方法】
1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...
- js的splice方法
splice是js原生处理数组的方法,可以在不改变引用的情况下对数组处理 arrayObject.splice(index,howmany,item1,.....,itemX)参数 描述index 必 ...
- JS中splice方法的使用
在js中,arr.splice(str)方法是处理数组的利器,利用它可以实现在指定位置删除.替换.插入指定数量的元素. 其语法为: arr.splice(index[, deleteCount, e ...
- js 数组去重方法总结
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, ...
- js对象遍历输出顺序错乱的问题
一.js对象遍历顺序错乱的原因 下边就来实践一下: var obj={'3':'ccc',name:'abc',age:23,school:'sdfds',class:'dfd',hobby:'dsf ...
- js数组及数组应用（冒泡和二分，遍历输出）
一.定义:1)var arr=new Array(); 加数据:arr[0]=1; 2)定义同时赋值:var arr=new Array(1,2,3,4,5); 3)调用:var arr=new Ar ...
随机推荐
- EF架构~CodeFirst模型下的数据初始化
回到目录 我为什么会来 在传统的大型系统设计中,数据库建模是个比开发更早的环节,先有数据库,然后是ORM模型,最后才是开发程序,而这种模型在EF出现后发生了转变,而且有可能将来会被code first ...
- 360路由器刷openwrt、不死uboot、双系统 、wifi中继
该类教程网上有很多,但是很多不全,给小白用户造成了很多困扰.我也是按照网上的教程刷了半天,才熟悉了是怎么个回事.这里整理成教程. 注意: 请看教程步骤走,不要跳跃性刷机.不懂的术语.软件,若本文无介绍 ...
- 让AngularJS的$http 服务像jQuery.ajax()一样工作
让AngularJS的$http 服务像jQuery.ajax()一样工作 $http的post . 请求默认的content-Type=application/json . 提交的是json对象的字 ...
- AJAX大文件切割上传以及带进度条。
分块传输的原理就是利用HTML5新增的文件slice截取函数. 代码如下: html: <input id="f" type="file" name=&q ...
- Asp.Net回车键触发Button的OnClick事件解决方案
在aspx页面有textbox文本框,还有三个button按钮.启用textbox的TextChanged事件和button的click事件. 问题: 现在在textbox文本框输入完数据按“回车”后 ...
- WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
- Gumby – 基于 Sass 的灵活的，响应式 CSS 框架
Gumby 框架是一个基于 SASS 的灵活的,响应式的 CSS 框架.可以借助其灵活,响应式的网格系统和 UI 套件快速创建逻辑的页面布局和应用程序原型. 您可能感兴趣的相关文章 35个让人惊讶的 ...
- 讲讲Handler+Looper+MessageQueue 关系
Handler+Looper+MessageQueue这三者的关系其实就是Android的消息机制.这块内容相比开发人员都不陌生,在面试中,或者日常开发中都会碰到,今天就来讲这三者的关系. 概述: H ...
- Android网格视图(GridView)
GridView的一些属性: 1.android:numColumns=”auto_fit” //GridView的列数设置为自动,也可以设置成2.3.4…… 2.android:columnWi ...
- Asp.net 高性能 Sqlite ORM 框架之 sqliteSugar
一.介简 easyliter框架的升级版本,并且正式命名为SqliteSugar框架,另外Sugar系列还有 MySql和MsSql版本,Oracle版本待开发中(因为客户端太大一直在忧郁当中) 用S ...