AngularJS例子 ng-repeat遍历输出 通过js的splice方法删除当前行
时间:2022-05-03
本文章向大家介绍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>
- 探讨通过Feign配合Hystrix进行调用时异常的处理
- 小窗播放视频的原理和实现(上)
- 一种Android App在Native层动态加载so库的方案
- java的双缓冲技术
- application之OnLowMemory()和 OnTrimMemory(level)讲解
- React Native组件(一)组件的生命周期
- Spring Cloud构建微服务架构:服务消费(基础)【Dalston版】
- Android解析ClassLoader(一)Java中的ClassLoader
- Android学习笔记(一)之仿正点闹钟时间齿轮滑动的效果
- Android解析WindowManager(三)Window的添加过程
- Spring Cloud构建微服务架构:服务消费(Ribbon)【Dalston版】
- Android解析WindowManager(一)WindowManager体系
- ios9 http请求失败的问题
- Android内存优化(六)LeakCanary使用详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Mysql系列第十七讲 流程控制语句(高手进阶)
- 私藏的5个好用的Pandas函数!
- 漫画:如何在数组中找到和为 “特定值” 的两个数?
- 当你在百度搜索关键字的时候,哪个网站会排在最前面?今天给大家科普一下“网站SEO”
- Mysql系列第十九讲 异常捕获及处理详解
- 【原创】经验分享:一个小小emoji尽然牵扯出来这么多东西?
- jQuery 事件对象,拷贝对象,多库共存
- jQuery 事件注册与事件处理
- v-charts 修改文本颜色
- 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
- 竞赛比完,代码、模型怎么处理?Kaggle大神:别删,这都是宝藏
- 显示DataGrid序号的一个适用的方法
- SAP Spartacus cms-components.service.ts里的config.cmsComponents
- ng-template和ng-container的嵌套使用
- SAP Spartacus pageSlot一览