angular实现商品加减

来源：互联网发布：pdf阅读器有没有mac 编辑：程序博客网时间：2024/05/22 04:51
<!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>
阅读全文
0 0