购物

来源：互联网发布：战舰世界数据端口编辑：程序博客网时间：2024/04/27 17:26
<!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;        }        span{            display: inline-block;            width: 18px;            height: 18px;            line-height: 18px;            text-align: center;            background: #eee;        }    </style>    <script src="angular-1.5.5/angular.min.js"></script>    <script>        var items=[{            name:"sx",            count:4,            price:200        },{            name:"pg",            count:2,            price:100        },{            name:"hw",            count:1,            price:100        }];        var myapp=angular.module("myapp",[]);        myapp.controller("myCtrl",function($scope){            $scope.items=items;            $scope.min=function(index){                $scope.items[index].count--;                if($scope.items[index].count<=0){                    $scope.items[index].count=0;                }            };            $scope.add=function(index){                $scope.items[index].count++;            };            $scope.del=function(index){                if(confirm("确定吗？")==true){                    $scope.items.splice(index,1);                }            };            $scope.count=function(){                var n=0;                for(var i=0;i<$scope.items.length;i++){                    n+=$scope.items[i].price*$scope.items[i].count                }                if(n>1100){                    $scope.yf=0;                }else{                    $scope.yf=10;                }                return n;            };          /*  $scope.$watch("count()",function(value){                //console.log(value)                if(value>1100){                    $scope.yf=0;                }else{                    $scope.yf=10;                }            })*/        })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><table>    <thead>    <tr>        <th>名称</th>        <th>数量</th>        <th>价格</th>        <th>小计</th>        <th>操作</th>    </tr>    </thead>    <tbody>        <tr ng-repeat="item in items">            <td>{{item.name}}</td>            <td><span ng-click="min($index)">-</span><input type="text" ng-model="item.count"><span ng-click="add($index)">+</span></td>            <td>{{item.price}}</td>            <td>{{item.price*item.count}}</td>            <td><button ng-click="del($index)">删除</button></td>        </tr>    </tbody></table><p>应付金额<a>{{count()}}</a></p><p>邮费<a>{{yf}}</a></p><p>师父金额<a>{{count()+yf}}</a></p></body></html>
阅读全文
0 0