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 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

算法--天下武功,唯快不破

我只写JS,为什么也要学习算法? 我入行最开始时是做网页设计的,那是在2003年, 然后一路到了现在,... 所以做为读者的你应该已经明白,我是一个野路子出身的...

1875
来自专栏软件技术

格智学院:面向对象设计模式?

  偷懒一下,请大家移步,直接参考文章《写了这么多年代码,你真的了解SOLID吗?》,记得回来呦~

722
来自专栏技术小黑屋

Java程序员必读的9本书

本文列出的9本书在Java程序员界都是被认为很棒的书。当一个程序员开始初学Java时,他的第一个问题应该是如何选择一本书来作为指导学习Java。这个问题也就表明...

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

《Spring Boot极简教程》附录2 编程的本质N小结

尼古拉斯·沃斯(Niklaus Wirth,1934年2月15日—),生於于瑞士温特图尔,是瑞士计算机科学家。Pascal语言之父。

663
来自专栏北京马哥教育

7个案例15分钟让你了解Python套路!

古人云:书山有路勤为径 学海无涯苦作舟 。 注:一般标榜着 “ XX天学会XX”、“ XX 分钟了解XX”的文章都不会是让你增长功力的文章,如本文。 随着互联...

3506
来自专栏企鹅号快讯

C语言到底有多牛!你知道多吗?

有人说C语言是世界上最牛逼的语言,因为操作系统就是用C语言编写的,学好了C才能更好的学习其他编程语言。为此,有人分享了下面一段代码,说是很牛逼的c语言代码,看得...

32610
来自专栏程序人生 阅读快乐

C++编程思想(两卷合订本)

《C++编程思想(两卷合订本)》曾荣获美国《软件开发》杂志评选的1996年jolt生产力大奖,中文版自2000年推出以来,经久不衰,获得了读者的充分肯定和高度评...

461
来自专栏程序人生 阅读快乐

C语言程序设计_现代方法

时至今日, C语言仍然是计算机领域的通用语言之一,但今天的 C语言已经和最初的时候大不相同了。本书最主要的一个目的就是通过一种“现代方法”来介绍 C语言,书中强...

772
来自专栏小詹同学

排名第 1 ,Python 到底有什么魔力 !?

根据 PYPL 发布的 7 月编程语言指数榜,Python 保持上涨趋势,8月流行指数再次上涨 5.5%,以 23.59% 的份额甩开 Java 排名第一,并逐...

1555
来自专栏编程心路

从王者荣耀看设计模式-策略模式(java版)

曾经我也是一名玩农药的大学生,但现在已经弃了,别问我为什么(被坑爹队友坑的哭。。。)。而今天我们来把让农药变荣耀,我们来从王者荣耀中看设计模式的策略模式。

815

扫码关注云+社区