混合开发（2）

最新推荐文章于 2021-11-18 18:51:25 发布

奥特曼不吃小怪兽

最新推荐文章于 2021-11-18 18:51:25 发布

阅读量154

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/zpf_blog/article/details/79840680

版权

Android 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html ng-app="App">
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/angular.min.js"></script>
       <script src="js/jquery-3.1.0.min.js"></script>
       <script type="text/javascript">
           var Ddata=[
           {
               gid:001,
               gname:"手机",
               gnum:3,
               gprice:1000,
               gcount:3000 },
           {
               gid:002,
               gname:"电脑",
               gnum:3,
               gprice:2000,
               gcount:6000 },
           {
               gid:003,
               gname:"电视",
               gnum:6,
               gprice:5000,
               gcount:3000 }
           ];
       </script>
       <script type="text/javascript">
           var app=angular.module("App",[]);
           app.controller("Ctrl",function($scope){
               $scope.data = Ddata;
               $scope.del=function($index){
                   $scope.data.splice($index,1);
               }
               $scope.orderkey="gid";
               $scope.counts=function(){
                   var a=0;
                   for (var i=0; i<$scope.data.length; i++) {
                       a+=$scope.data[i].gnum;
                   }
                   return a;
               }
               $scope.prices=function(){
                   var a=0;
                   for (var i=0; i<$scope.data.length; i++) {
                       a+=$scope.data[i].gnum*$scope.data[i].gprice;
                   }
                   return a;
               }
               $scope.Alldel=function(){
                   for (var i=$scope.data.length; i>=0; i--) {
                       $scope.data.splice(i,1);
                   }
               }
               $scope.chan=function($index){
                   if($scope.data[$index].gnum<=0){
                       var f=confirm("确定要删除该产品吗?");
                       if(f){
                       $scope.data.splice($index,1);
                       }
                   }
               }
           })
       </script>
       <style>
           .css1{
               background: blueviolet;
           }
           .css2{
               background: sandybrown;
           }
       </style>
   </head>
   <body ng-controller="Ctrl">
       <h1 style="text-align: center;"><span style="background: #31708F;">我的购物车详情</span></h1>
       <input type="text" style="background: yellow; margin-left: 700px;" placeholder="根据名称查询" ng-model="searchcommodity"/>
       <table border="2" cellpadding="1" style="margin-left: 420px;">
           <tr style="background: #8C8C8C;">
               <td>
                   商品编号
                   <input type="button" value="︿" ng-click="orderkey='gid'" />
               </td>
               <td>
                   商品名称
               </td>
               <td>
                   商品数量
               </td>
               <td>
                   商品单价
               </td>
               <td>
                   价格小计
                   <input type="button" value="﹀" ng-click="orderkey='gunm*gprice'" />
               </td>
               <td>
                   操作
               </td>
           </tr>
           <tr ng-repeat="user in data | filter:{gname:searchcommodity}" class="{{$even?'css1':'css2'}}">
               <td>
                   {{user.gid}}
               </td>
               <td>
                   {{user.gname}}
               </td>
               <td>
                   <input type="number" value="{{user.gnum}}" ng-model="user.gnum" ng-change="chan($index)"/>
               </td>
               <td>
                   {{user.gprice}}
               </td>
               <td>
                   {{user.gcount}}
               </td>
               <td>
                   <input type="button" value="移除" ng-click="del($index)"/>
               </td>
           </tr>
       </table>
       <div style="margin-left: 430px;">
           <span>商品总数:</span>
           <span>{{counts()}}      </span>

           <span>商品总价:</span>
           <span>{{prices()}}</span>

           <button ng-click="Alldel()" style="margin-left: 100px; background: yellow;">清空购物车</button>
       </div>

   </body>
</html>

奥特曼不吃小怪兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
混合开发（2）

&lt;!DOCTYPE html&gt;&lt;html ng-app="App"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/angular.min.js&qu
复制链接

扫一扫