AngularJS+清空购物车+全选+sort排序

最新推荐文章于 2023-02-16 22:12:01 发布

Logitech12

最新推荐文章于 2023-02-16 22:12:01 发布

阅读量966

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Logitech12/article/details/78240745

这篇博客演示了如何使用AngularJS实现购物车功能，包括清空购物车、全选商品、计算总价以及通过点击列头进行排序。示例中展示了商品列表，每个商品包含名称、价格、数量和操作选项，并提供了增加、减少数量、删除商品等操作。此外，还展示了如何实现基于属性的排序功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        var data=[{
                done:false,
                name:"小米",
                price:666,
                count:1,
            }, {
                done:false,
                name:"华为",
                price:888,
                count:1,
            },{
                done:false,
                name:"苹果",
                price:299,
                count:1,
            },{
                done:false,
                name:"小辣椒",
                price:555,
                count:1,
            },{
                done:false,
                name:"坚果",
                price:1999,
                count:1,
            }
        ]
        myapp.controller("myCtrl",function ($scope) {
            //声明
            $scope.data=data;
            $scope.price=0;
            //清空购物车
            $scope.deleteAll=function () {
                var aa=confirm("你是否确定清空购物车?");
                if(aa==true) {
                    $scope.data.length=0;
                }
            }
            //全选按钮
            $scope.gou=function () {
                for(var i=0;i<$scope.data.length;i++) {
                    if($scope.checkAll==true) {
                        $scope.data[i].done=true;
                    } else {
                        $scope.data[i].done=false;
                    }
                }
                $scope.numprice();
            }
            //勾选总价
            $scope.numprice=function () {
                $scope.price=0;
                for(var i=0;i<$scope.data.length;i++) {
                    if($scope.data[i].done==true) {
                        $scope.price+=$scope.data[i].count*$scope.data[i].price;
                    }
                }
            }
            //数量-
            $scope.min=function (index) {
                $scope.data[index].count--;
                $scope.numprice();
                if ($scope.data[index].count <= 0) {
                    $scope.data[index].count=0;
                }
            }
            //数量+
            $scope.max=function (index) {
                $scope.data[index].count++;
                $scope.numprice();
            }
            //单击删除
            $scope.delete=function (index) {
                var aa=confirm("你是否确定将选定的商品移出购物车?");
                if(aa==true) {
                    $scope.data.splice(index,1);
                }
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
    <h3>我的购物车</h3>
    <button ng-click="deleteAll()">清空购物车</button>
    <table  border="soild 1px #000" cellpadding="10" cellspacing="0">
        <thead>
        <tr>
            <th><input type="checkbox" ng-click="gou()" ng-model="checkAll">全选</th>
            <th>name</th>
            <th>price</th>
            <th>number</th>
            <th>totalPrice</th>
            <th>option</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in data">
            <td><input type="checkbox" ng-model="item.done" ng-click="numprice()"></td>
            <td>{{item.name}}</td>
            <td>{{item.price|currency:'￥'}}</td>
            <td><span ng-click="min($index)">-</span><input type="text" ng-model="item.count"><span ng-click="max($index)">+</span></td>
            <td>{{item.price*item.count|currency:'￥'}}</td>
            <td><button ng-click="delete($index)">删除</button></td>
        </tr>
        </tbody>
    </table>
    <div>商品总价:<span>{{price|currency:'￥'}}</span></div>
</body>
</html>

//sort排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var app = angular.module("myapp",[]);
        app.controller("mycont",function ($scope) {
            $scope.data = [{
                "name":"zs",
                "age":"20",
                "sex":"boy",
                "salary":"15000"
            },{
                "name":"ls",
                "age":"22",
                "sex":"boy",
                "salary":"13000"
            },{
                "name":"ww",
                "age":"18",
                "sex":"girl",
                "salary":"12000"
            }];
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="mycont">
    <input type="text" ng-model="find"><br><br>
    <table cellspacing="0" cellpadding="10" border="soild 1px #000">
        <thead>
        <tr>
            <th ng-click="sort(name)">姓名</th>
            <th ng-click="sort(age)">年龄</th>
            <th ng-click="sort(sex)">性别</th>
            <th ng-click="sort(salary)">薪资</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in data">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.salary}}</td>
        </tr>
        </tbody>
    </table>
    <p></p>
</body>
</html>