AngularJs-05-模拟购物车-阿里云开发者社区

AngularJs-05-模拟购物车

2018-03-19 1294

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

<!DOCTYPE html>
<html lang="zh" ng-app="myapp">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="../bower_components/angular/angular.js" type="text/javascript" charset="utf-8"></script>
    <title>AngularJs-模拟购物车</title>
    
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{margin:50px;}
        .tab{border-collapse: collapse;width: 100%;}
        th,td{border:1px solid #ccc;padding: 5px; text-align: text;}
    </style>
</head>
<body>

    <table class="tab" ng-controller="shopController">
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>金额</th>
                <th>数量</th>
                <th>小计</th>
            </tr>
            
            <tr ng-repeat="data in cdatas">
                <td>{{data.id}}</td>
                <td>{{data.name}}</td>
                <td><input type="text" ng-model="data.price"/></td>
                <td><input type="text" ng-model="data.num"/></td>
                <td>{{data.price * data.num}}</td>
            </tr>
            
            <tfoot>
                <tr>
                    <td colspan="10" style="text-align:right;padding: 20px;">
                        <input type="button" ng-click="totals()" value="计算总金额" />
                        <div>总计为：{{totals()}}元</div>
                    </td>
                </tr>
            </tfoot>
        </thead>
        
        
    </table>

    <script type="text/javascript">
        var app = angular.module("myapp",[]);
        
        app.controller("shopController",function($scope){
             $scope.cdatas = [
                 {id:1,name:"苹果1",price:1,num:1,total:2},
                 {id:2,name:"苹果2",price:2,num:2,total:4},
                 {id:3,name:"苹果3",price:3,num:3,total:6},
                 {id:4,name:"苹果4",price:4,num:4,total:8},
                 {id:5,name:"苹果5",price:5,num:5,total:10}
             ];
             
             $scope.totals = function(){
                 var total = 0;
                 
                 for (var i = 0;i < $scope.cdatas.length; i++) {
                     total += $scope.cdatas[i].price * $scope.cdatas[i].num;
                 }
                 return total;
             };
        });
    </script>
</body>
</html>

AngularJs-05-模拟购物车

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

AngularJs-05-模拟购物车

热门文章

最新文章

相关课程

相关电子书