AngularJs-05-模拟购物车-低调大师

AngularJs-05-模拟购物车

2018-03-18 515

<!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>

微信关注我们

原文链接：https://yq.aliyun.com/articles/551650

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

AngularJs-04-模拟登陆

<!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> </head> <body> <form action="" id="loginForm" ng-controller="loginController"> &l...

2018-03-19

553

python学习(3)--数据类型 1.python基本数据类型有五种:数字、字符串、列表、元组、字典。今天给大家介绍数字和字符串这两种。 (1)python中数字主要分为整型、浮点型、以及复数这三种。在python中为我们提供了type函数,这个函数返回的是一个数据类型,python代码如下: [delphi] view plain copy print(type(123)) print(type(123.0)) print(type(3E+2J)) 打印结果为: 通过打印可以发现123为int整型;123.0为float浮点型;3E+2J为complex复数型.在我们常见的java或C函数中,函数的参数要么整型或浮点型，从未见过一个函数既能处理整型参数，又能处理浮点型参数，而且参数只有一个，这是因为在python中无论是int还是float，python都将他们作为对象处理，可以理解为type函数接收的只是一个引用，type函数处理的是引用的内容，当获取到引用内容过后，通过内部的代码判断出引用指向内容的类型，最后返回数据的类型。这里大家只要知道，在python中无论是float还...

2018-03-19

650

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。