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

相关文章

来自专栏怀英的自我修炼

怀英漫谈3-百度Echarts中日期控件的使用总结

你好, 今天下午在用百度的Echarts做一个日历图的效果,其中跌跌碰碰遇到了几个问题,好在最终都解决了,今天想跟你聊聊这几个问题。 本篇偏编程,可以跳至最后看...

3529
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

772
来自专栏python学习指南

Python爬虫(十一)_案例:使用正则表达式的爬虫

本章将结合先前所学的爬虫和正则表达式知识,做一个简单的爬虫案例,更多内容请参考:Python学习指南 现在拥有了正则表达式这把神兵利器,我们就可以进行对爬...

1865
来自专栏Crossin的编程教室

【我问Crossin】爬虫学习该如何入门?

1 程序中使用了列表,运行过程中报错: IndexError: list index out of range 这是由于列表的下标索引值超过了列表的总长度。 ...

2625
来自专栏ionic3+

dayjs——一个轻量型的日期时间库

对于日期时间处理,常见有moment.js和date-fns.js等库,然而这些库在个人看来有点大了,而平常人往往只用到其中个别功能,这就有点浪费,当然也可以抽...

723
来自专栏ASP.NET MVC5 后台权限管理系统

FullCalendar 日历插件中文说明文档

FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalend...

3788
来自专栏liulun

Nim教程【四】

这是国内第一个关于Nim的系列教程 先说废话 Screenshot (2).png 高雅的Nim Screenshot (3).png 方法 Screens...

18610
来自专栏DeveWork

WordPress免插件仅代码实现文章归档模板 II

不多说了,本站目前使用的效果,可以到我的存档页一览,该方法来自zww,感谢原作者,在这之前,建议你: 1、你的博客存档页面地址后面的应该为/articles,而...

2528
来自专栏听雨堂

VB下中文URL编码问题的解决

        因为编码涉及的内容既多且烦,特别是vb的编码,又有诸多限制,所以在解决URL中文编码的时候走了很久的弯路。 问题:         我的VB...

2796
来自专栏web前端教室

vue.js的条件渲染,其实就是模板里面写if else

模板里面写逻辑判断在早期只有二种方法,一是用什么插件来搞;二是自己写一个模板然后正则匹配判断结果去替换字符串。其实这二种方法都是一样的,因为什么模板的插件十有八...

1887

扫描关注云+社区