第四第三公司小项目简单angularjs

最新推荐文章于 2024-09-23 16:00:00 发布

乔芥

最新推荐文章于 2024-09-23 16:00:00 发布

阅读量478

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ZkMao1007/article/details/78576667

本文介绍了一个使用AngularJS实现的购物车应用示例，包括商品筛选、排序、删除及批量操作等功能。通过这个示例，读者可以了解如何利用AngularJS进行前端开发，实现丰富的用户交互体验。

///////////经理的////////////////////////////////////////

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../../angular/angular.js"></script>
       <script>
           var app = angular.module("myApp", []);
           app.controller("myCtrl", function($scope) {
               $scope.products = [{
                   "id": 80,
                   "name": "iPhone",
                   "price": 5400,
                   state: false
               }, {
                   "id": 1200,
                   "name": "ipad mini",
                   "price": 2200,
                   state: false
               }, {
                   "id": 500,
                   "name": "ipad air",
                   "price": 2340,
                   state: false
               }, {
                   "id": 290,
                   "name": "ipad",
                   "price": 1420,
                   state: false
               }, {
                   "id": 910,
                   "name": "imac",
                   "price": 15400,
                   state: false
               }];

               //点击列明进行排序
               $scope.orderFlag = "";
               $scope.orderLine = "id";
               $scope.orderProduct = function(line) {
                   $scope.orderLine = line;
                   if($scope.orderFlag == "") {
                       $scope.orderFlag = "-";
                   } else {
                       $scope.orderFlag = "";
                   }
               }
               //下拉菜单删选商品价格、
               $scope.productPrice = "--请选择--";
               $scope.ifShow = function(price) {
                   /*console.log(price +":"+ productPrice);
                   return true;*/
                   //alert(priceMin);
                   if($scope.productPrice == "--请选择--") {
                       return true;
                   } else {
                       var arr = $scope.productPrice.split("-");
                       var priceMin = arr[0];
                       var priceMax = arr[1];
                       if(price < priceMin || price > priceMax) {
                           //alert("111");
                           return false;
                       } else {
                           return true;
                       }
                   }
               }

               //点击删除按钮，删除当前商品
               $scope.delProduct = function(delName) {
                   //alert(delName);
                   for(index in $scope.products) {
                       //alert("删除前，角标为"+index+"长度为："+$scope.products.length);
                       if(delName == $scope.products[index].name) {
                           $scope.products.splice(index, 1);
                           //alert("删除后，角标为"+index+"长度为："+$scope.products.length);
                       } else {

                       }
                   }
               }

               //定义下拉菜单排序规则
               $scope.selOrder;
               $scope.orderSel = function() {
                   if($scope.selOrder == "id") {
                       $scope.orderFlag = "";
                       $scope.orderLine = "id";
                   } else if($scope.selOrder == "-id") {
                       $scope.orderFlag = "-";
                       $scope.orderLine = "id";
                   } else if($scope.selOrder == "price") {
                       $scope.orderFlag = "";
                       $scope.orderLine = "price";
                   } else if($scope.selOrder == "-price") {
                       $scope.orderFlag = "-";
                       $scope.orderLine = "price";
                   };
               }
               //定义修改价格
               /*$scope.updatePrice = function(index){
                   //获得价格
                   var price = $scope.products[index].price;
                   var result = window.prompt("清输入要修改的价格",price);
                   alert(result);
               }*/
               $scope.updatePrice = function(price) {
                   //获得价格
                   for(index in $scope.products) {
                       //alert("删除前，角标为"+index+"长度为："+$scope.products.length);
                       if(price == $scope.products[index].price) {
                           //$scope.products.splice(index, 1);
                           //alert("删除后，角标为"+index+"长度为："+$scope.products.length);
                           //修改价格
                           var result = parseInt(window.prompt("清输入要修改的价格", price));

                           //在这之前对result的结果进行非字符串判断
                           if(result < 0) {
                               alert("输入有误，请重新更改");
                           } else {
                               if(window.confirm("确定要将" + $scope.products[index].name + "的价格更改为：" + result + "吗？")) {
                                   $scope.products[index].price = result;
                               };
                           }

                       } else {

                       }
                   }
               }

               //全选、全不选
               $scope.selectAll = false;
               $scope.selectAllFun = function() {
                   if($scope.selectAll) {
                       for(index in $scope.products) {
                           $scope.products[index].state = true;
                       }
                   } else {
                       for(index in $scope.products) {
                           $scope.products[index].state = false;
                       }
                   }
               }

               //反选
               $scope.checkSelecetAll = function() {
                   var flag = false;
                   //遍历数组，获得对象的状态
                   for(index in $scope.products) {
                       //alert($scope.products[index].state);
                       //如果有一个对象状态是false即未选中状态，就把标志位flag变为true。
                       if(!$scope.products[index].state){
                           flag = true;
                       }
                   }
                   //判断是否没有一个是未选中状态
                   if(flag){//这是正面至少有一个未选中
                       $scope.selectAll = false;//全选状态为false
                   }else{//一定是全部被选中
                       $scope.selectAll = true;//全选状态为true
                   }
               }

               //批量删除
               $scope.delSelect = function(){
                   //自己添加选中状态判断，就是有没有一个都没选中的情况。

                   //定义一个空数组，盛放状态是选中的对象
                   var isSelected = [];
                   //遍历数组，通过数组对象的状态，判断是否删除当前遍历的对象
                   for(index in $scope.products) {
                       //如果遍历的当前对象状态为true，则删除
                       if($scope.products[index].state){
                           //把当前选中的对象，一个个追加到isSelected数组中。
                           isSelected.push($scope.products[index]);
                           //alert(isSelected.length);
                       }
                   }

                   //遍历isSelected数组，因为isSelected数组中存放的是所有选中项的对象。
                   for(index in isSelected){
                       var name = isSelected[index].name;
                       for(index2 in $scope.products){
                           if(name == $scope.products[index2].name){
                               $scope.products.splice(index2,1);
                           }
                       }
                   }
               }

           });
       </script>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h3>购物车</h3>
           <input type="text" size="10" placeholder="产品名称" ng-model="search" /> 产品价格
           <select ng-model="productPrice">
               <option>--请选择--</option>
               <option>0-2000</option>
               <option>2001-3000</option>
               <option>3001-4000</option>
               <option>4001-5000</option>
               <option>5001-6000</option>
               <option>6001-7000</option>
               <option>7001-8000</option>
               <option>8001-无穷大</option>
           </select>
           <select ng-model="selOrder" ng-change="orderSel()">
               <option value="">排序方式</option>
               <option value="id">id正序</option>
               <option value="-id">id逆序</option>
               <option value="price">价格正序</option>
               <option value="-price">价格逆序</option>
           </select>
           <button ng-click="delSelect()">批量删除</button>
           <br /><br />
           <table border="1px solid blue" cellpadding="10" cellspacing="0">
               <tr>
                   <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </th>
                   <th ng-click="orderProduct('id')">产品编号</th>
                   <th ng-click="orderProduct('name')">产品名称</th>
                   <th ng-click="orderProduct('price')">产品价格</th>
                   <th>操作</th>
               </tr>
               
               <tr ng-repeat="sz in products | filter:{'name':search} | orderBy:(orderFlag+orderLine)" ng-if="ifShow(sz.price)">
                   <td><input type="checkbox" ng-model="sz.state" ng-click="checkSelecetAll()" /> </td>
                   <td>{{sz.id}}</td>
                   <td>{{sz.name}}</td>
                   <td>{{sz.price}}</td>
                   <td>
                       <button ng-click="delProduct(sz.name)">删除</button>
                       <button ng-click="updatePrice(sz.price)">修改</button>
                   </td>
               </tr>
           </table>
       </center>
   </body>

</html>

//////////////////////////////////////////////////我的//////////////////////////////////////////////////////////

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="../angular/angular.js"></script>
       <script >
           var app=angular.module("myapp",[]);

           app.controller("myctrl",function($scope){

                $scope.biao=[
                {
                "id":80,
                "name":"iPhone",
                "price":5400,
                state: false
                },
                {
                   "id":290,
                "name":"ipad",
                "price":1420,
                state: false

                },
                {
                 "id":500,
                "name":"ipad air",
                "price":2340,
                state: false


                },
                {
                 "id":910,
                "name":"imac",
                "price":15400,
                state: false
                },
                {
                 "id":1200,
                "name":"ipad mini",
                "price":2200,
                state: false
                }
                ];

                $scope.name2="";

                $scope.paixu="+id";
                $scope.flag;


           $scope.price2="--请选择--";


               //产品价格
               $scope.ifShow=function(p){
                      if($scope.price2=="--请选择--"){
                      return true;
                  }
               var arr=$scope.price2.split("-");

                  var min=arr[0];
                  var max=arr[1];

                  if(min>p||max<p){
                      return false;
                  }else{
                      return true;
                  }
               }

               //单个删除
              $scope.del=function(d){
               for(x in $scope.biao){
               if(d==$scope.biao[x].name){
                   $scope.biao.splice(x,1);
               }
               }
              }
              //单个修改
              $scope.update=function(u){
               for(x in $scope.biao){
                   if(u==$scope.biao[x].name){
                       var s=parseInt(prompt("请输入要修改的价格"));
                       if(!isNaN(s)){
                           if(s>=0){
                               if(confirm("是否要将"+u+"的价格修改成"+s)){
                               $scope.biao[x].price=s;
                           }
                           }else{alert("输入有误");}
                       }else{
                           alert("输入有误");
                       }
                   }
               }
              };
              //全选全不选
           $scope.flag="false";
           $scope.dache=function(){
              if($scope.flag){
                  for(x in $scope.biao){
                      $scope.biao[x].state=true;
                  }
              }else{
                  for(x in $scope.biao){
                      $scope.biao[x].state=false;
                  }
              }
           }
           //反选
           $scope.xiaoche=function(){
           var zt=false;
           for(index in $scope.biao){
               if(!$scope.biao[index].state){
                   zt=true;
               }

               if(zt){

                   $scope.flag=false;
               }else{
                   $scope.flag=true;
               }
           }
           }

           //批量删除
           $scope.deleteall=function(){
               var s=[];
               for(index1 in $scope.biao){
                   if( $scope.biao[index1].state){
                      s.push($scope.biao[index1]);
                   }
               }
               for(index2 in s){

                   var name=s[index2].name;
                 for(index3 in $scope.biao){
                    if(name==$scope.biao[index3].name){
                        $scope.biao.splice(index3,1);
                    }
                 }
               }
           }


           });

       </script>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
   <center>
       <input type="text" ng-model="name2" placeholder="产品名称" >产品价格
       <select ng-model="price2">
           <option>--请选择--</option>
           <option>0-2000</option>
           <option>2001-3000</option>
           <option>3001-4000</option>
           <option>4001-5000</option>
           <option>5001-6000</option>
           <option>6001-7000</option>
           <option>7001-8000</option>
           <option>8001-无穷大</option>
       </select>
       <select ng-model="paixu">
           <option value="+id">排序方式</option>
           <option value="+id">id正序</option>
           <option value="-id">id逆序</option>
           <option value="+price">价格正序</option>
           <option value="-price">价格逆序</option>
       </select>
       <button ng-click="deleteall()">批量删除</button>

       <table border="1px solid" cellpadding="10px" cellspacing="0px">
           <thead>
               <td ><input type="checkbox" ng-model="flag" ng-click="dache()"></td>
               <td>产品编号</td>
               <td>产品名称</td>
               <td>产品价格</td>
               <td>操作</td>
           </thead>
           <tbody>
               <tr ng-repeat="x in biao | filter:{'name':name2} | orderBy:paixu" ng-if="ifShow(x.price)">
                   <td><input type="checkbox" ng-click="xiaoche()" ng-model="x.state"></td>
                   <td>{{x.id}}</td>
                   <td>{{x.name}}</td>
                   <td>{{x.price}}</td>
                   <td><button ng-click="del(x.name)">删除</button>
                       <button ng-click="update(x.name)">修改</button></td>
               </tr>
           </tbody>
       </table>

   </center>
   </body>
</html>