augnlarjs很灵活的添加

最新推荐文章于 2021-08-11 10:52:18 发布

眼角带笑_fxs

最新推荐文章于 2021-08-11 10:52:18 发布

阅读量732

点赞数

本文链接：https://blog.csdn.net/fxs_321/article/details/78610123

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="../angularjs/angular-route.js" ></script>
  <script type="text/javascript" src="../angularjs/angular.js" ></script>
  <style>
   table tr:nth-child(even){
    background-color: #EEEEEE;
   }
   table tr:nth-child(odd){
    background-color: #FFFFFF;
   }
   table tr:hover{
    background-color: red;
   }
  </style>
  <script>
   var app=angular.module("myApp",[]);
   app.controller("myCtrl",function($scope){
    $scope.list=[{
     name:"张三",
     age:45,
     names:"zhangsan",
     job:"总经理",
     state:false
    },{
     name:"李四",
     age:43,
     names:"lisi",
     job:"设计师",
     state:false
    },{
     name:"王五",
     age:40,
     names:"wangwu",
     job:"工程师",
     state:false
    },{
     name:"赵六",
     age:33,
     names:"zhaoliu",
     job:"工程师",
     state:false
    },{
     name:"周七",
     age:32,
     names:"zhouqi",
     job:"人事经理",
     state:false
    }];
    //实现删除功能
    $scope.del=function(name){
     for(index in $scope.list){
      if(name==$scope.list[index].name){
       if(window.confirm("确定要删除吗？")){
        $scope.list.splice(index,1);
        alert("删除成功");
       }else{

       }
      }
     }
    };
    //对年龄进行排序
    $scope.bian;
    $scope.paixv=function(){
     if($scope.bian=="age"){
      $scope.orderFlag="";
      $scope.orderLine="age";
     }else if($scope.bian=="-age"){
      $scope.orderFlag="-";
      $scope.orderLine="age";
     }
    };

    //实现添加元素，先是点击按钮显示出来
    $scope.isShow=false;
    $scope.isif=function(){
     if($scope.isShow){
      $scope.isShow=false;
     }else{
      $scope.isShow=true;
      $scope.checkSub=[];
      $scope.updateShow=false;
     }
    };
    //添加元素时先进行表单验证，成功就添加不成功不添加
    $scope.newname="";
    $scope.newage="";
    $scope.newnames="";
    $scope.newjob="";
    $scope.divshow=false;
    $scope.checkSub=[];
    $scope.addList=function(){
     //点击事件后先清空一下数组
     $scope.checkSub=[];
     if($scope.newname==null||$scope.newname==""){
      $scope.checkSub.push("姓名不能为空");
     }
     if($scope.newnames==null||$scope.newnames==""){
      $scope.checkSub.push("拼音不能为空");
     }
     if($scope.newjob==null||$scope.newjob==""){
      $scope.checkSub.push("职业不能为空");
     }
     if($scope.newage==null||$scope.newage==""){
      $scope.checkSub.push("年龄不能为空");
     }else if(isNaN($scope.newage)){
      alert("年龄格式错误");
      return false;
     }
     if($scope.checkSub.length>0){
      $scope.divshow=true;
     }else{
      var lists={
       name:$scope.newname,
       age:parseInt($scope.newage),
       names:$scope.newnames,
       job:$scope.newjob
      };
      $scope.list.push(lists);
      $scope.isShow=false;
      //在这里清空一下数组
      $scope.checkSub=[];
      alert("添加成功");
     }
    };
    //查询所有名字
    $scope.textname = "";
    $scope.ming = "";
    $scope.flag2 = false;
    $scope.selects=function(){
     if($scope.textname=="敏感字符"){
      alert("不能包含敏感字符");
      $scope.ming = "";
     }
     if($scope.textname==""){
      alert("输入框为空");
      $scope.ming="";
     }else{
      for(index in $scope.list){
       if($scope.textname==$scope.list[index].name){
        $scope.ming=$scope.textname;
        $scope.flag2=true;
       }else if($scope.list[index].name.indexOf($scope.textname)>=0){
        $scope.ming=$scope.textname;
        $scope.flag2=true;
       }else {

       }
      }
     }
     if(!$scope.flag2){
      alert("没有匹配项");
     }
    };
    //实现全选和全不选
    $scope.select=false;
    $scope.selectAll=function(){
     if($scope.select){
      for(index in $scope.list){
       $scope.list[index].state=true;
      }
     }else{
      for(index in $scope.list){
       $scope.list[index].state=false;
      }
     }
    };
    //实现反选功能
    $scope.checkSelect=function(){
     var i=0;
     for(index in $scope.list){
      if(!$scope.list[index].state){
       $scope.select=false;
      }else{
       i++;
      }
      if(i==$scope.list.length){
       $scope.select=true;
      }else{
       $scope.select=false;
      }
     }
    };
    //批量删除
    $scope.delAll=function(){
     var arr=[];
     for(index in $scope.list){
      if($scope.list[index].state){
       arr.push($scope.list[index].name);
      }
     }
     if(arr.length<=0){
      alert("请先选择删除项");
     }else{
      if(window.confirm("确定要删除吗？")){
       for(index in arr){
        for(index2 in $scope.list){
         if(arr[index]==$scope.list[index2].name){
          $scope.list.splice(index2,1);
         }
        }
       }
       alert("删除成功");
      }
     }
    };
    //修改元素
    $scope.updateShow=false;
    $scope.updatename="";
    $scope.updateage="";
    $scope.updatenames="";
    $scope.updatejob="";
    $scope.updateAll=function(l){
     if(!$scope.updateShow){
      $scope.updateShow=true;
      $scope.isShow=false;
      $scope.updatename=l.name;
      $scope.updateage=l.age;
      $scope.updatenames=l.names;
      $scope.updatejob=l.job;
     }else{
      $scope.updateShow=false;
      $scope.ucheckSub=[];
     }
    }
    //修改之后保存页面
    $scope.ucheckSub=[];
    $scope.divupdateshow=false;
    $scope.updateList=function(){
     $scope.ucheckSub=[];
     if($scope.updatename==null||$scope.updatename==""){
      $scope.ucheckSub.push("姓名不能为空");
     }
     if($scope.updatenames==null||$scope.updatenames==""){
      $scope.ucheckSub.push("拼音不能为空");
     }
     if($scope.updatejob==null||$scope.updatejob==""){
      $scope.ucheckSub.push("职业不能为空");
     }
     if($scope.updateage==null||$scope.updateage==""){
      $scope.ucheckSub.push("年龄不能为空");
     }else if(isNaN($scope.updateage)){
      alert("年龄格式错误");
      return false;
     }
     if($scope.ucheckSub.length>0){
      $scope.divupdateshow=true;
     }else{
      $scope.divupdateshow=false;
      for(index in $scope.list){
       if($scope.updatename==$scope.list[index].name){
        $scope.list[index].age=$scope.updateage;
        $scope.list[index].names=$scope.updatenames;
        $scope.list[index].job=$scope.updatejob;
        $scope.updateShow=false;
       }
      }
     }
    };
   });
  </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <center>
   姓名查询条件<input type="text" ng-model="textname"/>
   <select ng-change="paixv()" ng-model="bian">
    <option value="">--请选择--</option>
    <option value="age">按年龄正序</option>
    <option value="-age">按年龄逆序</option>
   </select>
   <button ng-click="delAll()">批量删除</button>
   <br /><br />
   <span>用户列表</span>
   <br />
   <table border="1px solid red" cellpadding="10" cellspacing="0" width="700px;" style="text-align: center;">
    <tr style="background-color: #999999;">
     <td><input type="checkbox" ng-model="select" ng-click="selectAll()"/></td>
     <td>姓名</td>
     <td>年龄</td>
     <td>拼音</td>
     <td>职位</td>
     <td>操作</td>
    </tr>
    <tr ng-repeat="l in list | filter:ming | orderBy:(orderFlag+orderLine) ">
     <td><input type="checkbox" ng-model="l.state" ng-click="checkSelect()" /></td>
     <td>{{l.name}}</td>
     <td>{{l.age}}</td>
     <td>{{l.names}}</td>
     <td>{{l.job}}</td>
     <td style="cursor: pointer;">
      <button ng-click="del(l.name)">删除</button>
      <button ng-click="updateAll(l)">修改</button>
     </td>
    </tr>
   </table>
   <br />
   <button ng-click="selects()">查询</button>
   <button ng-click="isif()">添加用户</button>
   <div style="width: 300px; height: 200px;" ng-show="isShow">
    <h3>添加用户信息</h3>
    姓名：<input type="text" ng-model="newname"/><br /><br />
    年龄：<input type="text" ng-model="newage"/><br /><br />
    拼音：<input type="text" ng-model="newnames"/><br /><br />
    职位：<input type="text" ng-model="newjob"/><br /><br />
    <div style="width: 300px; height: 100px;" ng-if="divshow">
     <ul>
      <li ng-repeat="c in checkSub">{{c}}</li>
     </ul>
    </div>

    <button ng-click="addList()">保存</button>
   </div>
   <div style="width: 300px; height: 200px;" ng-show="updateShow">
    <h3>修改用户信息</h3>
    修改姓名：<input type="text" ng-model="updatename" disabled="disabled"/><br /><br />
    修改年龄：<input type="text" ng-model="updateage"/><br /><br />
    修改拼音：<input type="text" ng-model="updatenames"/><br /><br />
    修改职位：<input type="text" ng-model="updatejob"/><br /><br />
    <div style="width: 300px; height: 100px;" ng-if="divupdateshow">
     <ul>
      <li ng-repeat="c in ucheckSub">{{c}}</li>
     </ul>
    </div>
    <button ng-click="updateList()">保存</button>
   </div>
  </center>
</body>
</html>

眼角带笑_fxs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
augnlarjs很灵活的添加

table tr:nth-child(even){ background-color: #EEEEEE; } table tr:nth-child(odd){ background-color: #FFFFFF; } table tr:hover{ background-color: red; } var
复制链接

扫一扫