Angular 基础

会飞的鱼_Android

于 2018-05-02 11:06:29 发布

阅读量127

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/as89751/article/details/80163833

版权

Angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript" src="js/angular.min.js" ></script>
  <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
  <style>
   .red{
    background-color: red;
   }
   .yellow{
    background-color: yellow;
   }
  </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <center>
   <h2>我的购物车详情</h2>
   <input type = "text" placeholder="请根据名称查询" ng-model="select" style="background-color: yellow;" />

   <br><br>
  <table border="1" style="width: 600px;">
   <tr style="background: darkgray;">
    <th ng-click="">编号</th>
    <th>姓名</th>
    <th>数量</th>
    <th>价格</th>
    <th>小计</th>
    <th>操作</th>
   </tr>
   <tr ng-repeat=" p in MyJson | filter:{gname:select} " class = "{{$index%2? 'red':'yellow' }}">
    <th>{{p.gid}}</th>
    <th>{{p.gname}}</th>
    <th><input type="button" value = "+" ng-click="jia($index)"/>{{p.gnum}}<input type="button" value = "-" ng-click="jian($index,p.gname)"/></th>
    <th>{{p.gprice}}</th>
    <th>{{p.gnum * p.gprice}}</th>
    <th><input type="checkbox"/></th>
   </tr>
  </table>
  <input type = "button" value="{{zs}}"/>
  <input type= "button" value = "清空购物车" ng-click="deleteAll()" style="background-color: yellow;" />
  <input type = "button" value = "删除" ng-click="deleteMore()" style="background-color: yellow;" />
  </center>
</body>
   <script>
   //创建控制器
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope,$http){
    $scope.select = "";  //过滤(查询)
    $scope.MyJson = [
        {"gid": 001,"gname":"手机","gnum":3,"gprice": 1000,"gcount":3000},
        { "gid": 002,"gname":"电脑","gnum":3,"gprice": 2000,"gcount":6000},
        { "gid": 003, "gname":"电视","gnum":6,"gprice": 500,"gcount":3000}
        ];
    $scope.deleteMore = function(){
     if(confirm("您确认要删除选中的商品吗?")){
     //找到所有被选中的多选框
     var check = $(":checkbox:checked");
     if(check.length == 0){

      alert("请选择要删除的数据");
     }
     //做循环
     for(var i = check.length-1;i>=0;i--){
      $scope.MyJson.splice(check[i].value,1);
     }
     }
     $scope.priceNum();
    }
    //清空购物车
    $scope.deleteAll = function(){
     $scope.MyJson = [];
     $scope.zs = "总数量是:0";
    }
    $scope.zs = "";
    $scope.zj = "";
    $scope.priceNum = function(){
     var sl = 0;
     var n = 0;
     var p = 0;
     //做循环获取价格和数量
     for(var i = 0;i<$scope.MyJson.length;i++){
      var sl = $scope.MyJson[i];
      n = n+sl.gnum;
     }
     $scope.zs = "总数量是:"+n;
    }
    $scope.priceNum();
    //让数量加1
    $scope.jia = function(index){
     //获取当前的下标
     var g = $scope.MyJson[index];
     g.gnum = g.gnum+1;
     $scope.priceNum();
    }
    //让数量减1
    $scope.jian = function(index,name){
     var g = $scope.MyJson[index];
     g.gnum = g.gnum-1;
     //判断数量如果== 0 的话就把这个数据删掉
     if(g.gnum == 0){
      if(confirm("您确认要删除该商品吗？")){
      for(var i = 0;i<$scope.MyJson.length;i++){
       if($scope.MyJson[i].gname == name){
        $scope.MyJson.splice(i,1);
       }
      }
      }
     }
     $scope.priceNum();
    }
   });
  </script>
</html>

会飞的鱼_Android

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular 基础

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/angular.min.js" &a
复制链接

扫一扫