angularjs的增删改查

来源：互联网发布：张学友唱功知乎编辑：程序博客网时间：2024/06/06 02:27

<!DOCTYPE html>
<html ng-app="xsk">

   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           th {
               width: 100px;
           }

           .ta {
               margin: 0 auto;
           }

           td {
               text-align: center;
           }
       </style>
       <script src="angular-1.5.5/angular.js"></script>
       <script src="js/jquery-3.1.1.min.js"></script>
       <script type="text/javascript">
           var app = angular.module("xsk", []);
           app.controller("dome", function($scope) {
               //给复选框默认给false
               $scope.selectAll=false;
           //点击表格出来,默认隐藏
           $scope.bt = function() {
               document.getElementById("table").style.display = "block"
           }
           //删除;;;;从base数组中当前开始删除;;;删一个
           $scope.del = function(index) {
               $scope.base.splice(index, 1);
           }
           //原生数据数组
           $scope.base = [{
                   state: false,
                   'name': "啊1",
                   'pas': "123456",
                   "number": 24,
                   "sex": "男"
               },
               {
                   state: false,
                   'name': "啊啊",
                   'pas': "123456",
                   "number": 25,
                   "sex": "男"
               },
               {
                   state: false,
                   'name': "啊啊啊",
                   'pas': "123456",
                   "number": 26,
                   "sex": "男"
               },
               {
                   state: false,
                   'name': "啊啊啊啊",
                   'pas': "123456",
                   "number": 27,
                   "sex": "女"
               },
               {
                   state: false,
                   'name': "啊啊啊啊",
                   'pas': "123456",
                   "number": 28,
                   "sex": "男"
               }
           ];
           //点击修改密码
           $scope.edit = function(aa) {
               var a = prompt("提示内容", "请输入修改的值");
               aa.pas = a;
           }
           //添加到表格中数据
           $scope.add = function() {
               //点击添加时得到输入框内容
               $scope.name;
               $scope.pws;
               $scope.nian;
               $scope.sex;
               //添加到一个数组中
               $scope.data = [{
                   state: false,
                   'name': $scope.name,
                   'pas': $scope.pws,
                   "number": $scope.nian,
                   "sex": $scope.sex
               }]
               //遍历出数组内容
               for(var i = 0; i < $scope.data.length; i++) {
                   //添加到外面大数组;;;原生数组
                   $scope.base.unshift($scope.data[i]);
               }
           }
           //过滤年龄的查询
           $scope.ageTest = function(age, ageSize) {
               if(ageSize != "--请选择--") {
                   var agess = ageSize.split("-");
                   var ageMin = agess[0];
                   var ageMax = agess[1];
                   if(age < ageMin || age > ageMax) {
                       return false;
                   } else {
                       return true;
                   }
               } else {
                   return true;
               }
           }
            //点击删除全部;;;并且删除数组内容
           $scope.delAll = function() {
               $scope.base.splice(0, $scope.base.length)
           }
             //点击批量删除
           $scope.seldel = function() {
               console.log($scope.base)
               //遍历出数组内容
               for(var i = 0; i < $scope.base.length; i++) {
                    //如果是true的话就删除
                   if($scope.base[i].state) {
                       $scope.base.splice(i, 1);
                       i--;
                   }

               }

           }

           });
           ///////////jquery
           /*$(document).ready(function() {
               //点击事假;;;批量删除
               $("#sel").click(function() {
                   //找到复选框里name=quan选中的
                   var ck = $("input:checkbox[name='quan']:checked");
                   //如果选中的大于0;;;就遍历出他每个节点
                   if(ck.length > 0) {
                       for(var i = 0; i < ck.length; i++) {
                           //找到每个节点删除
                           ck[i].parentNode.parentNode.remove();
                       }
                   } else {
                       alert("请勾选");
                   }
               });
               //删除全部
               $("#shan").click(function() {
                   $("#tb tbody").html("");
               });
           });*/
       </script>
   </head>

   <body ng-controller="dome">
       姓名查找<input type="text" ng-model="inputText" /> 年龄查找
       <select id="age" ng-model="ageSize" ng-init="ageSize='--请选择--'">
           <option>10-20</option>
           <option>20-30</option>
           <option>30-40</option>
       </select>
       性别
       <select ng-model="select1">
           <option></option>
           <option>男</option>
           <option>女</option>
       </select>
       <input type="button" ng-click="delAll()" value="删除全部" id="shan" />
       <input type="button" value="批量删除" id="sel" ng-click="seldel()" />
       <br />
       <br />
       <table id="tb" border="1" cellspacing="0" cellpadding="0">
           <thead>
               <tr>
                   <th>全选<input type="checkbox" /></th>
                   <th>序号</th>
                   <th>姓名</th>
                   <th>密码</th>
                   <th>年龄</th>
                   <th>性别</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody ng-repeat=" m in base |filter: {name:inputText}|filter:select1" ng-if="ageTest(m.number,ageSize)">
               <td><input type='checkbox' ng-checked="selectAll" ng-model="m.state" name='quan' /></td>
               <td>{{$index}}</td>
               <td>{{m.name}}</td>
               <td>{{m.pas}}</td>
               <td>{{m.number}}</td>
               <td>{{m.sex}}</td>
               <td><button ng-click="edit(m)">修改密码</button>
                   <button ng-click="del($index)">删除</button>
               </td>
           </tbody>
       </table>
       <br /><br /><br /><br /><br />
       <button ng-click="bt()">添加用户</button>
       <table id="table" class="ta" border="1" cellspacing="0" cellpadding="0" style="display: none;">
           <tr>
               <td style="width: 80px; height: 40px;">姓名</td>
               <td><input type="text" placeholder="请输入名字" ng-model="name" id="name" /></td>
           </tr>
           <tr>
               <td style="width: 80px; height: 40px;">密码</td>
               <td><input type="text" placeholder="请输入密码" ng-model="pws" /></td>
           </tr>
           <tr>
               <td style="width: 80px; height: 40px;">年龄</td>
               <td><input type="text" placeholder="请输入年龄" ng-model="nian" /></td>
           </tr>
           <tr>
               <td style="width: 80px; height: 40px;">性别</td>
               <td>
                   <select ng-model="sex">
                       <option>
                           男
                       </option>
                       <option>
                           女
                       </option>
                   </select>
               </td>
           </tr>
           <tr>
               <td colspan="2"><input type="button" value="提交" ng-click="add()" /></td>
           </tr>
       </table>

   </body>

</html>

阅读全文

0 0