Angularjs 包邮

来源：互联网发布：java ssh协议jar包编辑：程序博客网时间：2024/05/04 00:52
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <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",[]);        //模拟数据        var items=[{            name:"三星",            count:4,            price:200        },{            name:"苹果",            count:2,            price:300        },{            name:"华为",            count:3,            price:100        }];        //添加控制器        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.max=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>1700){                    $scope.yf=0;                }else {                    $scope.yf=10;                }*/                return n;            }            //邮费            $scope.$watch("count()",function (value) {                //console.log(value);                if (value>1700){                    $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="max($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>{{yf+count()}}</a></p></body></html>
阅读全文
0 0