文章标题 AngularJs购物车表格的制作

最新推荐文章于 2018-06-21 14:43:19 发布

龙图图

最新推荐文章于 2018-06-21 14:43:19 发布

阅读量335

点赞数

分类专栏：网页设计文章标签： angularjs

本文链接：https://blog.csdn.net/xingyueyezi01/article/details/78338915

版权

网页设计专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文将介绍如何使用AngularJS创建一个动态的购物车表格，包括添加商品、删除商品及显示总价等功能。通过实例解析AngularJS的数据绑定和指令应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <style>
        .a{ width: 1400px; height: 500px; margin: 0 auto; margin-top: 120px}
        .b{width: 1400px; height: 50px;}
        .c{width: 1400px; height: 50px; }
        .d{float: right; width: 150px; height: 50px;background-color: red}
        .e{width: 1400px; height: 380px}
        .h{ margin-top: 100px}
        table{width: 1400px; height:400px}
        .num{
            width: 70px;
            text-align: center;
        }
        .f{width: 150px; height: 50px; background-color: red}

    </style>


</head>
<body ng-app="myAPP" ng-controller="myCtrl">
  <div class="a">
      <div class="b"><h2>我的购物车</h2></div>
      <hr/>
      <div class="c">
          <input class="f" ng-click="deleteSel()" type="button" value="批量删除"/>
          <button class="d" ng-click="removeAll()">清空购物车</button>
      </div>


      <div class="e">
          <table ng-hide="getSize()" border="1" cellpadding="10" cellspacing="0">
              <thead>


              <tr>


                  <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
                  <th>name</th>
                  <th>price</th>
                  <th>number</th>
                  <th> totalPrice</th>
                  <th>option</th>
              </tr>
              </thead>
              <tbody>
              <tr ng-repeat="x in users">
                  <th><input ng-model="x.state" type="checkbox"/></th>
                  <td>{{x.myname}}</td>
                  <td>{{x.myprice | currency:"￥"}}</td>
                  <td><button style="background-color: #0c60ee" ng-click="reduce($index)">-</button>
                      <input type="number" class="num" ng-model="x.mynumber" ng-change="change($index)" />
                      <button style="background-color: #0c60ee" ng-click="add($index)">+</button>
                  </td>
                  <td>{{x.myprice*x.mynumber  | currency:"￥"}}</td>
                  <td><button style="background-color: #0c60ee" ng-click="remove($index)">删除</button></td></tr>

              </tr>
              <tr>
                  <td colspan="6"><span>总价:</span><span ng-bind="totalQuantity() | currency:'￥'"></span></td>

              </tr>
              </tbody>
          </table>

          <p class="h" ng-show="getSize()">您的购物车为空，请先逛<a href="#">购物车</a></p>
      </div>


  </div>

</body>
<script>
    var app=angular.module("myAPP",[]);
    app.controller("myCtrl",function ($scope) {

        $scope.users=[{
            myname:"qq",myprice:"12.9",mynumber:2,mypriceone:"25.80"},
            { myname:"wx",myprice:"23.90",mynumber:1,mypriceone:"23.90"},
            { myname:"wx",myprice:"99.90",mynumber:1,mypriceone:"99.90"}];


        //减少数量
        $scope.reduce = function(index){
            if( $scope.users[index].mynumber > 1){
                $scope.users[index].mynumber--;
            }else{
                $scope.remove(index);
            }
        }

        //添加数量函数
        $scope.add = function(index){
            $scope.users[index].mynumber++;
        }


        //所有商品总价函数
        $scope.totalQuantity = function(){
            var allprice = 0
            for(var i = 0 ; i <$scope.users.length;i++ ){
                allprice += $scope.users[i].mynumber * $scope.users[i].mypriceone;
            }
            return allprice;
        }


        //清空购物车
        $scope.removeAll = function(){
            if(confirm("你确定套清空购物车所有商品吗?")){
                $scope.users = [];
            }
        }

        //删除当前商品
        $scope.remove = function(index){
            if(confirm("确定要清空数据吗")){
                $scope.users.splice(index,1)
            }
        }


        //全选方法
        $scope.selectAll = false;
        $scope.selectAllFun = function(){

            if($scope.selectAll){

                for(index in $scope.users){
                    $scope.users[index].state = true;
                }
            }else{
                for(index in $scope.users){
                    $scope.users[index].state = false;
                }
            }
        }


        //批量删除
        $scope.deleteSel=function(){
            var userNames=[];
            for(index in $scope.users){
                if($scope.users[index].state == true){
                    userNames.push($scope.users[index].myname);
                }
            }

            if(userNames.length>0){
                if(confirm("是否删除选中项？")){
                    for(i in userNames){
                        var myname=userNames[i];
                        for(i2 in $scope.users){
                            if($scope.users[i2].myname==myname){
                                $scope.users.splice(i2,1);
                            }
                        }
                    }
                }
            }else{
                alert("请选择删除的项")
            }

        }
        //判断数据源的长度
        $scope.getSize = function(){
            if($scope.users.length > 0 ){
                return false;
            }else{
                return true;
            }
        }
    });
</script>
</html>

龙图图

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文章标题 AngularJs购物车表格的制作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="angular.js"></script> <script src="angular-route.js"></script> <style> .a{ w
复制链接

扫一扫

专栏目录