AngularJs多选框表格全选反选批量删除

来源：互联网发布：js除法取整不四舍五入编辑：程序博客网时间：2024/05/18 14:24

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../AngularJS库/angular.js" ></script>
       <script>
           var app = angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               //数组
               $scope.arr = [{
                   id:1,
                   name:"小红",
                   age:20,
                   sex:"女",
                   checked:"false"
               },{
                   id:2,
                   name:"欢欢",
                   age:15,
                   sex:"男",
                   checked:"false"
               },{
                   id:3,
                   name:"慧慧",
                   age:25,
                   sex:"女",
                   checked:"false"
               },{
                   id:4,
                   name:"仁仁",
                   age:32,
                   sex:"男",
                   checked:"false"
               }];

               //计数器
               var a = 0;
               //全选状态的初始值
               $scope.checkAll = false;
           //全选的点击事件
           $scope.selectAll = function(){
               if($scope.checkAll == true){
                   //如果全选的按钮选中了,把所有的小按钮都选中
                   for(var i=0;i<$scope.arr.length;i++){
                       //所有的状态变成true
                       $scope.arr[i].checked = true;
                       //计数器加1
                       a++;
                   }
               }else{
                   //取消选中按钮,所有的都取消
                   for(var i=0;i<$scope.arr.length;i++){
                       //所有的状态变成true
                       $scope.arr[i].checked = false;
                       //取消选中再--
                       a--;
                   }
               }
           };

           //反着全选的事件
           $scope.selectc = function(index){
               //如果当前项选中了 ,计数器++
               if($scope.arr[index].checked==true){
                   a++;
               }else{
                   //如果没选中,,计数器--
                   a--;
               }
               //如果计数器长度等于数组长度,全选中了,,就把全选的按钮也选中
               if(a==$scope.arr.length){
                   $scope.checkAll=true;
               }else{
                   $scope.checkAll= false;
               }
           };

               //点击删除所选按钮的事件
           $scope.deletePerson = function(){
               //alert("6");
               if(a==0){
                   //一个也没选中
                   alert("啥都没选");
               }else{
                   //a数量大于0
                   for(var i=0;i<$scope.arr.length;i++){
                       if($scope.arr[i].checked==true){
                           //遍历过程中,如果选中了就删除
                           $scope.arr.splice(i,1);
                           //必须写i--,因为可能删除了当前那一行以后,,下标超出去了
                           i--;
                           a--;
                       }
                   }
                   $scope.checkAll = false;
               }
           };
           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <button ng-click="deletePerson()">删除选中项</button>
           <br /><br />
           <table border="1" cellpadding="10" cellspacing="0" width="500px">
               <thead>
                   <th>
           <input type="checkbox" ng-model="checkAll" ng-click="selectAll()"/>全选
                   </th>
                   <th>id</th>
                   <th>姓名</th>
                   <th>年龄</th>
                   <th>性别</th>
               </thead>
               <tr ng-repeat="x in arr" align="center">
                   <td><input type="checkbox" ng-model="x.checked" ng-click="selectc($index)"/></td>
                   <td>{{x.id}}</td>
                   <td>{{x.name}}</td>
                   <td>{{x.age}}</td>
                   <td>{{x.sex}}</td>
               </tr>
           </table>
           <div ng-repeat="x in arr">
               <span>{{x.checked}}</span>
           </div>
       </center>
   </body>
</html>

阅读全文

0 0