angular实现商品加减

最新推荐文章于 2019-05-05 17:07:28 发布

gh0708

最新推荐文章于 2019-05-05 17:07:28 发布

阅读量575

点赞数

分类专栏： Web前段文章标签： angularjs lgh

本文链接：https://blog.csdn.net/gh0708/article/details/78345922

版权

Web前段专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        th,td{
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
    <script src="angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.data=[{
                    name:"qq",
                    price:"12.90",
                    numbar:"2",
                    totalPrice:"25.80",
                },{
                    name:"wx",
                    price:"23.90",
                    numbar:"1",
                    totalPrice:"23.90",
                },{
                    name:"wx",
                    price:"12.9",
                    numbar:"1",
                    totalPrice:"99.90",
                }
                ];
            $scope.delAll=function () {
                $scope.data.length=0;
            };
            $scope.del=function(index){
                console.log(index);
                if(confirm("是否删除"))
                {
                    $scope.data.splice(index,1);
                }
            };
            $scope.checkAll=false;
            $scope.check2=function(){
                if($scope.checkAll==true){
                    for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].check=true;
                    }
                }else{
                    for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].check=false;
                    }
                }
            };
            //反着全选
            var n=0;
            $scope.count=function(index){
                //console.log(index);
                if($scope.data[index].check==true){
                    n++;
                }else{
                    n--
                }
                console.log(n);
                if(n==$scope.data.length){
                    $scope.checkAll=true;
                }else{
                    $scope.checkAll=false;
                }
            };
            $scope.min=function(index){
                $scope.data[index].numbar--;
                if($scope.data[index].numbar<0){
                    $scope.data[index].numbar=0;
                }
            };
            $scope.add=function(index){
                $scope.data[index].numbar++;
            };
            $scope.count=function(){
                var n=0;
                console.log(0);
                for(var i=0;i<$scope.data.length;i++){
                    n+=$scope.data[i].price*$scope.data[i].numbar;
                }
                return n;
            };
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h1>我的购物车</h1>
<button ng-click="delAll()">删除全部</button>
<table>
    <thead>
    <tr>
        <th><input type="checkbox" ng-model="checkAll" ng-click="check2()"></th>
        <th>name</th>
        <th>price</th>
        <th>numbar</th>
        <th>totalPrice</th>
        <th>option</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data">
        <td><input type="checkbox" ng-model="item.check" ng-click="count($index)"></td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td><span ng-click="min($index)">-</span><input type="numbar" ng-model="item.numbar"><span ng-click="add($index)">+</span></td>
        <td>{{item.price*item.numbar}}</td>
        <td><button ng-click="del($index)">删除</button></td>
    </tr>
    <tr>
        <td colspan="6"><p>总价:<a>{{count()}}</a></p></td>
    </tr>
    </tbody>
</table>
</body>
</html>

gh0708

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular实现商品加减

Title table{ border-collapse: collapse; } th,td{ padding: 10px; border: 1px solid #000; } var myapp=angu
复制链接

扫一扫