增删改查的列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.slim.js"></script>
    <script src="angular1.4.6.min.js"></script>
    <style>
        li {
            list-style-type: none;
        }
    </style>
</head>
<body ng-app="Myapp" ng-controller="Mycontroller">
<h1>我的购物车</h1>
<button ng-click="removeAll()" style="float: right;">清空购物车</button>
<button ng-click="removesome()">删除选中商品</button>
<div class="container">
    <div>
        <ul class="list-group">
            <li>
                <input type="checkbox" ng-click="allck()">
                <span>name</span>
                <span>price</span>
                <span style="margin-left: 150px;">
                    number
                </span>
                <span style="margin-left: 130px;">totalPrice</span>
                <span style="margin-left: 20px;">option</span>
            </li>

            <li ng-repeat="shop in shoplist" class="list-group-item">
                <input class="one" type="checkbox" ng-click="addone($index)">
                <span style="margin-left: 20px;">{{shop.name}}</span>
                <span style="margin-left: 20px;">¥{{shop.price}}</span>
                <span style="margin-left: 20px;">
                    <button ng-click="reduce($index)">-</button>
    <input type="text" ng-model="shop.num" ng-change="change($index)">
        <button ng-click="add($index)">+</button>
                </span>
                <span style="margin-left: 40px;">¥{{(shop.price*shop.num)|number : 2 }}</span>
                <button style="margin-left: 40px;" class="bt" ng-click="removeone($index)">移除</button>
            </li>
            <li>
                <span>总价为:¥</span>
                <span ng-bind="allSum()|number : 2 "> </span>
            </li>
        </ul>
    </div>
</div>


</body>

<script>
    //回调函数判断是否已经优值
    function run(name) {
        var result = true;
        for (var i = 0; i < updatelist.length; i++) {
            if (name == updatelist[i]) {
                result == false;
            }
        }
        return result;
    }
    //回调函数判断是否已经优值
    function run() {
        var result = true;

        if (somelist.length > 0) {
            result == false;

        }
        return result;
    }

    var one = true;
    var somelist = [];
    var updatelist = [];
    var app = angular.module("Myapp", []);
    //最开始添加进去的信息
    app.controller("Mycontroller", function ($scope) {
        $scope.shoplist = [
            {name: "香蕉", price: "10.10", num: 10},
            {name: "菠萝", price: "14.10", num: 10},
            {name: "苹果", price: "12.10", num: 10},
            {name: "鸭梨", price: "11.10", num: 10},
        ];
        //选中之后删除所有的
        $scope.allck = function () {
            if ($scope.shoplist.length > 0) {
                $(".one").attr("checked", "checked");
                updatelist.push("3");
                updatelist.push("2");
                updatelist.push("1");
                updatelist.push("0");


            }
        };
        //减少1
        $scope.addone = function (index) {
            var name = index;
            if (run(name)) {
                updatelist.push(name);
            } else {
                for (var i = 0; i < updatelist.length; i++) {
                    if (name == updatelist[i]) {
                        updatelist.splice(i);
                    }
                }
            }
        }
//批量删除
        $scope.removesome = function () {
            if (confirm("确定批量删除吗?")) {
                for (j = 0; j < updatelist.length; j++) {
                    var i = updatelist[j];
                    $scope.shoplist.splice(i, 1);
                }

            }
            if ($scope.shoplist.length == 0) {
                $(".container").remove();
            }
        }
//判断不乱输入
        $scope.change = function (index) {
            if ($scope.shoplist[index].num >= 1) {

            } else {
                alert("请输入大于0的数字");
            }
        }
//直接删除所有
        $scope.removeAll = function () {
            $(".container").remove();
        };
        $scope.reduce = function (index) {

            if ($scope.shoplist[index].num > 1) {
                $scope.shoplist[index].num--;
            } else {
                if (confirm("确定删除吗?")) {
                    $scope.shoplist.splice(index, 1);
                } else {
                    $scope.shoplist[index].num = 10;

                }
            }
            if ($scope.shoplist.length == 0) {
                $(".container").remove();
            }
        }
//增加1
        $scope.add = function (index) {
            $scope.shoplist[index].num++;
        }

//删除一个的
        $scope.removeone = function (index) {
            if (confirm("确定删除吗?")) {
                $scope.shoplist.splice(index, 1);
            }
            if ($scope.shoplist.length == 0) {
                $(".container").remove();
            }
        };
        //总数的和
        $scope.allSum = function () {
            var allPrice = 0;
            for (var i = 0; i < $scope.shoplist.length; i++) {
                allPrice += $scope.shoplist[i].price * $scope.shoplist[i].num;
            }
            return allPrice;
        }
    });


</script>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值