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

相关文章

来自专栏编程心路

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

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

1015
来自专栏Python绿色通道

程序员最想拥有的编程语言,Python排第一!

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

1062
来自专栏web前端教室

JS原型,a和b是不是失散多年的兄弟?

面试题这种东西真的是反人类的设计,我觉得它的最大的作用就是用来打击我的信心。每当我觉得自己js水平还可以,的时候,它就会在不经意间跳出来,给我一耳光。例如这个,...

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

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

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

661
来自专栏企鹅号快讯

编程为什么入门首选C语言呢

为什么入门首选C语言呢 C语言除了能让我们了编程的大门,也让我们了解到程序的运行原理,和计算机底层是如何交互的,这些底层的知识决定了你的高度,也决定了你的未来的...

3996
来自专栏calmound

匈牙利算法

今天学习了下匈牙利算法,发现这个早在几个月前学过的知识已经忘记的一干二净了,记得当初学习的时候只是看书,看论文,现在要好好的总结下,防止以后再次忘记。 此次总结...

3227
来自专栏Java技术栈

Google的面试题长啥样?看完被吊打!

作为一名Google的工程师和面试官,今天是我第二次发文分享科技公司面试建议了。这里先声明:本文仅代表我个人的观察、意见和建议。请勿当作来自Google或Alp...

1214
来自专栏技术小黑屋

Java程序员必读的9本书

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

982
来自专栏北京马哥教育

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

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

3616
来自专栏java学习

每日一练(2017/5/24)

Java基础 | 数据库 | Android | 学习视频 | 学习资料下载 课前导读 ●回复"每日一练"获取以前的题目! ●答案公布时间:为每期发布题目的第二...

32910

扫码关注云+社区