Angularjs全选/反选/表单验证

最新推荐文章于 2019-03-28 11:05:20 发布

永不言败01

最新推荐文章于 2019-03-28 11:05:20 发布

阅读量285

点赞数

本文链接：https://blog.csdn.net/GQ17316250426/article/details/78346605

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>月考练习</title>
       <script type="text/javascript" src="../angluarjs/angular.js" ></script>
       <script type="text/javascript" src="../angluarjs/angular-route.js" ></script>
       <script type="text/javascript" src="../angluarjs/jquery-2.1.0.js" ></script>
       <script>
             var app=angular.module("myApp",[]);
             app.controller
               //控制器
             app.controller("myCtrl",function($scope){

                $scope.students=[
                {name:"qq",price:12.90,number:5,state:false},/*选中*/
                {name:"aa",price:12.90,number:6,state:false},
                {name:"ee",price:12.90,number:7,state:false},
                {name:"r",price:12.90,number:8,state:false},
                {name:"yy",price:12.90,number:10,state:false}
                 ];


              $scope.jian=function(index){

                  if( $scope.students[index].number==1){ //等于一的时候删除

                      $scope.students.splice(index,1);

                  }else{
                      $scope.students[index].number--;
                  }
                 }

                   $scope.add=function(index){

                      $scope.students[index].number++;

                 }
              ///下标删除//

                $scope.delete=function(index){

                     if(window.confirm("要删除"+$scope.students[index].name+"吗？")){
                           $scope.students.splice(index,1);
                       }else{

                              }
                }
                //删除全部
                $scope.deletecar=function(){
                       $scope.students=[];
                }



                      //获取总价
               $scope.allPrice = function(){
                   var all = 0;
                        //遍历数组内所有下标按下标把价格找到
                   for(index in $scope.students){
                       all += $scope.students[index].price * $scope.students[index].number;
                       //总数等于 =总数+(价格乘数量)
                   }
                   return all;//返回值
                    }

             ///
                  //设置全选
                $scope.selectAll = false; //本身值全是false

                  $scope.selectAllFun = function(){
                   //alert($scope.selectAll);
                   if($scope.selectAll){
                       for(index in $scope.students){
                           $scope.students[index].state = true;
                           //只要点击就把所有state都变成true就能全选
                       }
                   }else{
                       for(index in $scope.students){
                           $scope.students[index].state = false;
                       }//要么就是都不选
                   }
               };

           /反选//
                 $scope.checkone = function(){ //下面全选中上面的按钮也要变
                    var count=0;
                    for(i=0;i<$scope.students.length;i++){
                        if($scope.students[i].state == true){
                            count++;
                            //如果都为true就
                        }
                    }
                    if(count == $scope.students.length){
                        $scope.selectAll=true;
                    }else{
                        $scope.selectAll=false;
                    }
                 }

                 批量//
                    $scope.deleteSelected = function(){
                   $scope.selectedShop = [];
                   for(index in $scope.students){
                       if($scope.students[index].state==true){ //拿到数据源选中的值
                           $scope.selectedShop.push($scope.students[index].name); //把选中的条目
                       }
                      }
                   alert( $scope.selectedShop);
                   if($scope.selectedShop.length>0){
                       for(i1 in $scope.selectedShop){

                           for(i2 in $scope.students){
                               if($scope.selectedShop[i1] == $scope.students[i2].name){
                                   $scope.students.splice(i2,1); //就在数据源删除
                               }
                           }
                       }
                   }else{
                       alert("请先选择")
                   }
               }

               $scope.getSize = function(){
                   if($scope.students.length > 0 ){
                       return false;
                   }else{
                       return true;
                   }
               }

             });

          </script>


   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
          <center>


              <input type="button" value="清除购物车" style=" margin-right: -400px;" ng-click="deletecar()"/>
                <button ng-click="deleteSelected()">批量删除</button>
              <table border="1 solid" cellpadding="7" cellspacing="1" width="50%">

             <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>


              <tr ng-repeat="i in students">
                        <th><input type="checkbox" ng-click="checkone()" ng-model="i.state"></th>
                        <th>{{i.name}}</th>
                        <th>{{i.price | currency:"￥"}}</th>
                        <th>
                        <button ng-click="jian($index)">-</button>
                        <input type="text" ng-model="i.number">
                        <button ng-click="add($index)">+</button>
                        </th>
                        <th>{{"¥"+i.price*i.number}}</th>
                        <th><input type="button" value="删除" ng-click="delete($index)"></th>

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

              </table>




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



   </body>
</html>