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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT派

人民日报整版报道区块链,我只想知道用什么语言开发?

IT派 - {技术青年圈} 持续关注互联网、区块链、人工智能领域 2月26日,《人民日报》经济版头条整版刊发了区块链署名评论文章《三问区块链》《抓住区块链这...

8856
来自专栏企鹅号快讯

月薪数万的攻城狮带你了解到什么是C语言编程思想,原来这就是编程思想

什么是编程思想?答案可能很会复杂,但也可以很简单; 一句话来讲就是,用计算机来解决人们实际问题的思维方式,即编程思想; 编程就是为了解决实际中的问题,在思考如何...

2049
来自专栏Golang语言社区

伙计们,Go 并没有那么简单

出于好奇,我最近开始接触一些 Go 的代码。我之前对它有一些了解,但是从来没有尝试去写(没有需求)。但是现在我们团队选择使用 Go 来开发一个项目,所以我觉得这...

3036
来自专栏区块链大本营

继承变量覆盖及构造函数失配,竟然会导致这些漏洞

区块参数作为区块属性的数据,对于挖掘区块的矿工来说,并不具有完全的随机性,因此将其作为随机数生成的依据是有局限性和危险性的。而以太坊本身又没有提供类似于传统语言...

662
来自专栏一个会写诗的程序员的博客

计算机语言是怎样设计出来的

所谓计算机语言只是一个抽象的规范,而编译器是这个规范的实现,它是在这个规范的严格定义下被实现的.

731
来自专栏LiveEdu在线科技教育平台

Java 8五大主要功能为开发者提供了哪些便利?

两年前当Java 8发布后,立即受到了业界的欢迎,因为它大大提高了Java的性能。它独特的卖点是,顾及了编程语言的每一个方面,包括JVM(Java虚拟机)和编译...

26113
来自专栏阮一峰的网络日志

为什么Lisp语言如此先进?(译文)

上周,《黑客与画家》总算翻译完成,已经交给出版社了。 翻译完这本书,累得像生了一场大病。把书稿交出去的时候,心里空荡荡的,也不知道自己得到了什么,失去了什么。 ...

2656
来自专栏java工会

你连java成长史都不了解,谈什么java学习技巧!

1226
来自专栏kalifaの日々

POJ3684(弹性碰撞)各种wrong answer踩坑

我踩过的坑全部都写在注释里面了,供大家参考。 #include <stdio.h> #include <algorithm> #include <math.h>...

2705
来自专栏数据结构与算法

BZOJ1044: [HAOI2008]木棍分割(dp 单调队列)

第二问设\(f[i][j]\)表示前\(i\)个数,切了\(j\)段的方案数,单调队列优化一下。

551

扫码关注云+社区