angular中删除表格数据的一行

来源：互联网发布：唐七抄袭知乎编辑：程序博客网时间：2024/06/04 17:40

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
    <style>
        table{
            width: 500px;
            height: 300px;
            border-collapse: collapse;
            text-align: center;
        }
        td{
            border: 1px solid black;
        }
    </style>
    <script>
        var myapp = angular.module("myapp", []);
        myapp.controller("myCtrl", function ($scope) {
            $scope.goods = [
                {
                    gname: "iphone8",
                    num: "3",
                    price: "999"
                }, {
                    gname: "iphone7",
                    num: "4",
                    price: "599"
                }, {
                    gname: "iphone6",
                    num: "5",
                    price: "499"
                }, {
                    gname: "iphone5",
                    num: "6",
                    price: "399"
                }
            ];
            $scope.allSum=function(){
                var allPrice = 0;
                for(var i= 0;i<$scope.goods.length;i++){
                    allPrice+=$scope.goods[i].price*$scope.goods[i].num;
                }
                return allPrice;
            };
            //移除一项
            $scope.remove=function(index){
                if(confirm('确定移除此项吗？')){
                    $scope.goods.splice(index,1);
                }
                if($scope.goods.length==0){
                    alert('您的购物车为空');
                }
            };

        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<table>
    <tr>
        <td colspan="5">您的购物车</td>
    </tr>
    <tr>
        <td>商品名称</td>
        <td>数量</td>
        <td>单价</td>
        <td>小计</td>
        <td>操作</td>
    </tr>
    <tr ng-repeat="arr in goods">
        <td>{{arr.gname}}</td>
        <td>{{arr.num}}</td>
        <td>{{arr.price |currency:"RMB ￥ "}}</td>
        <td>{{arr.num*arr.price |currency:"RMB ￥ "}}</td>
        <td><button ng-click="remove($index)">删除</button></td>
    </tr>
    <tr>
        <td colspan="5">总金额 <span ng-bind="allSum() | currency:'RMB ￥ '"></span></td>
    </tr>
</table>

</body>
</html>

阅读全文

0 0