简单的angular实现一个购物车小功能

最新推荐文章于 2024-04-20 10:06:15 发布

小胖几

最新推荐文章于 2024-04-20 10:06:15 发布

阅读量597

点赞数

分类专栏：安卓混合开发文章标签： angular 购物车

本文链接：https://blog.csdn.net/androidyhr/article/details/78333210

版权

安卓混合开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <script src="js/angular.js"></script>
   <script>
       var app = angular.module("myApp", []);
       app.controller("myCtrl", function($scope) {
           //创建集合，
           $scope.jihe = [{
               name: "qq",
               price: "12.90",
               num: 2,
               totalPrice: "25.80",
               //如果表格中有复选框，添加一个状态属性
               state:false
           }, {
               name: "wx",
               price: "23.90",
               num: 1,
               totalPrice: "23.90",
               state:false
           }, {
               name: "zfb",
               price: "99.90",
               num: 1,
               totalPrice: "99.90",
               state:false
           }];
           //减少一个
           $scope.reduce = function(index) {
               if($scope.jihe[index].num > 1) {
                   $scope.jihe[index].num--;
               } else{
                   //调用移除的方法
                   $scope.remove(index);
               }
           };
           //增加一个
           $scope.add = function(index) {
               $scope.jihe[index].num++;
           };

           //移除一项
            $scope.remove=function(index){
                if(confirm('确定移除此项吗？')){
                    $scope.jihe.splice(index,1);
                }
            };
            //清空购物车
            $scope.removeAll = function(){
               if(confirm('确定清空购物车')){
                    $scope.jihe=[];
                }
            }
            //全选
           $scope.quan = function(){

                      for(i=0;i<$scope.jihe.length;i++){
                             if($scope.che == true){

                          $scope.jihe[i].state =true;
                      }else{
                          $scope.jihe[i].state =false;
                      }
                   }
           }
           //单选
           $scope.dan= function(){
              //定义一个初始变量
              var count=0;
              //遍历集合
                  for(i=0;i<$scope.jihe.length;i++){
                     //如果选中的话，就记录选中了几个
                     if($scope.jihe[i].state==true){
                         count++;
                   }
                 }
                  //如果选中的个数等于集合的长度，就代表全选了
                  if(count==$scope.jihe.length){
                     $scope.che=true;

                  }else{

                  $scope.che=false;

                  }

           }

           //获取总价
               $scope.zongjia = function(){
                   //初始化一个变量
                   var zong = 0;
                   //遍历集合，然后把每行选中的小计价格加起来就是总价
                   for(index in $scope.jihe){
                       zong += $scope.jihe[index].price * $scope.jihe[index].num;
                   }
                   return zong;
               }



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

       });
   </script>

   <body ng-app="myApp" ng-controller="myCtrl">
       <h1>我的购物车</h1>
       <button ng-click="removeAll()">清空购物车</button>
       <center>
           <table width="1000" height="300px" border="1" cellpadding="10" cellspacing="0">
               <thead>
                   <tr>
                       <th><input type="checkbox" ng-model="che" ng-click="quan()"/></th>
                       <th>name</th>
                       <th>price</th>
                       <th>number</th>
                       <th>totalPrice</th>
                       <th>option</th>
                   </tr>
               </thead>
               <tbody>
                   <tr style="{{$even?'background-color: #f1f1f1':''}}" ng-repeat="j in jihe">
                       <td><input ng-model="j.state" type="checkbox" ng-click='dan()'/></td>
                       <td>{{j.name}}</td>
                       <td>

                           {{j.price | currency}}

                       </td>
                       <td><button style="background-color: blue;" ng-click="reduce($index)">-</button>
                           <input type="number" ng-model="j.num" value="{{j.num}}"/>
                           <button style="background-color: blue;" ng-click="add($index)">+</button></td>
                       <td><span>{{j.price*j.num | currency}}</span> </td>
                       <td><button style="background-color: blue;" ng-click="remove($index)">移除</button></td>
                   </tr>
                   <tr>
                       <td colspan="6" ng-bind="zongjia()"></td>
                   </tr>
               </tbody>
           </table>
           <span ng-show="getSize()">您的购物车为空，请先逛<a href="#">购物车</a></span>
       </center>

   </body>

</html>

小胖几

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的angular实现一个购物车小功能

var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { //创建集合， $scope.jihe = [{ name: "qq", price: "12.
复制链接

扫一扫