angular js 表格全选批量删除添加删除

最新推荐文章于 2019-10-11 10:56:31 发布

高唯西

最新推荐文章于 2019-10-11 10:56:31 发布

阅读量241

点赞数

文章标签： angul

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
  <script>
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope){
    $scope.datas=[
    {"id":"001","name":"张三","sex":"男","hoppy":"1995-04-24","city":"北京-西二旗"},
    {"id":"002","name":"李四","sex":"女","hoppy":"1985-02-20","city":"郑州-二七区"},
    {"id":"003","name":"赵六","sex":"男","hoppy":"1973-05-21","city":"南京-南开区"},
    {"id":"004","name":"曹操","sex":"女","hoppy":"1998-04-15","city":"内蒙古-海拉尔区"}];


    //性别数据源
    $scope.proList = [
      {
      "sexs":"男"
      },
      {
      "sexs":"女"
      }
    ];
    //地址数据源
    $scope.citylist=[
        {
        "pname":"北京",
        "citys":[
        {"sname":"西二旗"},
        {"sname":"西三旗"}
        ]
        },
        {
        "pname":"郑州",
        "citys":[
        {"sname":"二七区"},
        {"sname":"新郑市"}
        ]
        },
        {
        "pname":"南京",
        "citys":[
        {"sname":"南开区"},
        {"sname":"中山市"}
        ]
        }
    ];
    //省市改变事件
    $scope.cityChange = function(){
     $scope.newcity2=$scope.newcity.citys[0];
    }
    $scope.checkAll;

    $scope.nameT;
    $scope.hoppyT;

    //判断姓名输入框
    $scope.nameS=function(){
     if($scope.nameT.length<3||$scope.nameT.length>30){
      alert("用户名不小于3个字符且不大于30个字符");
     }else if($scope.nameT==undefined){
      alert("用户名不能为空");
     }
    };
    $scope.hoppyS=function(){
     if($scope.hoppyT==undefined){
      alert("不能为空");
     }
    };
    //添加
    $scope.addIsShow = false;
    $scope.addAll=function(){
     if($scope.nameT.length<3 || $scope.nameT.length>30 || $scope.hoppyT==undefined){
      alert("用户信息不符合规范");
      $scope.nameT=null;
      $scope.hoppyT=null;
     }else{
     var a={};
     // 随机数作为id
     var n = Math.round(Math.random()*1000);
     a.id=n;
     a.name=$scope.nameT;
     a.hoppy=$scope.hoppyT;
     a.sex=$scope.newsex.sexs;
     a.city=$scope.newcity.pname+"----"+$scope.newcity2.sname;
     $scope.datas.push(a);
     $scope.addIsShow = false;
     $scope.showTable = true;

     $scope.nameT=null;
     $scope.hoppyT=null;

      }
     };
     //复选框全选反选
     $scope.selectAll = false;
//     //点击标题的复选框，实现全选功能
    $scope.nockeckAllFun = function(){
     for (var i = 0; i < $scope.datas.length; i++) {
      $scope.datas[i].ck1 = $scope.check;
     }
    }
    //全选反选
    $scope.fanxuan = function(){
     for (var i = 0; i < $scope.datas.length; i++) {
      $scope.datas[i].ck1 = !$scope.datas[i].ck1;
     }
    }

    //批量删除，如果用户点击批量删除时都没有选中需要删除的数据则提示用户需要先选中数据
    $scope.showTable=true;
    //批量删除
    $scope.deleteAll = function(){
     for (var i = 0; i < $scope.datas.length; i++) {
      if($scope.datas[i].ck1){
       $scope.datas.splice(i,1);
       i--;
      }
     }
    }

    //删除按钮
    $scope.deleteName=function(_name){
     if(confirm("是否确定删除")){
        for(var v=0;v<$scope.datas.length;v++){
       var s=$scope.datas[v];
       if(s.name==_name){
      $scope.datas.splice(v,1);
      alert("删除成功");
      break;
     }
       }
     }


    };


   });


  </script>
  <style>
   table{
    text-align: center;
   }
  </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <center>
  姓名：<input type="text" ng-model="nameT" ng-blur="nameS();"/>   
  性别：<select
    ng-model="newsex"
    ng-options="item.sexs for item in proList"
    ng-init="newsex=proList[0]"
   >
  </select>  
  生日：<input type="text" ng-model="hoppyT" ng-blur="hoppyS();"/>  
  住址：<select
   ng-model="newcity"
   ng-options="item.pname for item in citylist"
   ng-init="newcity=citylist[0]"
   ng-change="cityChange();"
   >
  </select>
  <select
   ng-model="newcity2"
   ng-options="item2.sname for item2 in newcity.citys"
   ng-init="newcity2=newcity.citys[0]"
   >
  </select>  
  <input type="button" value="添加" style="background-color: yellow;width: 100px;" ng-click="addAll();"/>
  <br /><br />
  <input type="button" value="全选/反选"style="background-color: yellow;" ng-click="fanxuan();" id="zhuce"/>    
  <input type="button" value="批量删除" style="background-color: red;" ng-click="deleteAll();"/><br />
  <table border="1px" cellpadding="1px" cellspacing="0px" bordercolor="red" width="900px" ng-show="showTable">
   <tr style="background-color: cadetblue;">
    <td><input type="checkbox" ng-model="check" ng-click="nockeckAllFun()"/></td>
    <td>姓名</td>
    <td>性别</td>
    <td>生日</td>
    <td>住址</td>
    <td>删除</td>
   </tr>
   <tr ng-repeat="d in datas">
    <td><input type="checkbox" ng-model="d.ck1"/></td>
    <td>{{d.name}}</td>
    <td>{{d.sex}}</td>
    <td>{{d.hoppy}}</td>
    <td>{{d.city}}</td>
    <td><input type="button" value="删除" ng-click="deleteName(d.name);"/></td>
   </tr>
  </table>
  </center>
</body>
</html>

高唯西

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular js 表格全选批量删除添加删除

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/angular.min.js" type="text/javascript" charset=&
复制链接

扫一扫