AngularJS 用户管理示例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41640196/article/details/79456100

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           form label{
               display: block;
           }
       </style>
       <script src="js/angular.min.js"></script>
       <script>
           var app=angular.module("xxjapp",[]);
           app.controller("ctrl",function($scope,$http){
               $http.get("data/datas.json").success(function(aa){
                   $scope.message=aa; //把datas.json中的数据绑定到纽带的message
               })
               //删除
               $scope.del=function(i){
                   $scope.message.splice(i,1);
               }
               //修改
               $scope.update=function(s){
                   var password2=prompt("修改的密码",s.Password);
                   s.password=password2;
               }

               //全选和反选的操作
               $scope.ckall=function(){

                   //遍历数组，让数组进行全选或者全不选
                   for(var i=0;i<$scope.message.length;i++){
                       $scope.message[i].ck=$scope.flagck;
                   }
               }

               //删除全部
               $scope.clear=function(){
                   $scope.message=[]; //清空数组，给数组重新复制为空数组
               }

               //批量删除
               $scope.delall=function(){
                   for(var i=0;i<$scope.message.length;i++){
                       if( $scope.message[i].ck){
                           $scope.message.splice(i,1);
                           i--; //保证此数组不会隔行删除
                       }
                   }
               }
               //定义检查改行年龄是否合法
               $scope.filterAge=function(stu){
                   //获取下拉列表框选择年龄
                   var selecte_age= $scope.cxage;
                   if(selecte_age==undefined||selecte_age==""){
                       return true;
                   }else {
                       var int_age= parseInt(selecte_age);
                       if(stu.age>int_age&&stu.age<=(int_age+10)){
                           return true;
                       }
                   }
                   return false;
               }

               //保存用户信息的方法
               $scope.save=function(){
                   //1 把输入框的值组装到一个对象上
                   var stu={sname:$scope.uname ,password:$scope.upwd,age:$scope.uage,sex:$scope.sex}; //把用户输入的信息,赋值给对应的属性
                   //2 把对象添加到数组中
                   $scope.message.push(stu);//把输入的对象添加到数组中
               }
           })
       </script>
   </head>
   <body ng-app="xxjapp" ng-controller="ctrl">
       姓名查找：<input type="text" ng-model="cxsname"/>
       年龄查找：<select ng-model="cxage">
               <option value="">请选择</option>
               <option value="10">10-20</option>
               <option value="20">20-30</option>
               <option value="30">30-40</option>
               </select>
       性别查找：<select ng-model="cxsex">
               <option value="">请选择</option>
               <option>男</option>
               <option>女</option>
               </select>
       <button>查询</button>
       <button ng-click="clear()">删除全部</button>
       <button ng-click="delall()">批量删除</button>
       <table border="1px" style="width: 700px;" > 
           <tr>
               <td><input type="checkbox" ng-click="ckall()" ng-model="flagck" /></td>
               <td>序号</td>
               <td>姓名</td>
               <td>密码</td>
               <td>年龄</td>
               <td>性别</td>
               <td>操作</td>
           </tr>
           <tr ng-repeat="s in message|filter:{sname:cxsname,sex:cxsex}" ng-show="filterAge(s)"> 
               <td><input type="checkbox" ng-model="s.ck" /></td>
               <td>{{$index+1}}</td> 
               <td>{{s.sname}}</td>
               <td>{{s.password}}</td>
               <td>{{s.age}}</td>
               <td>{{s.sex}}</td>
               <td><button ng-click="update(s)">修改</button></td>
               <td><button ng-click="del($index)">删除</button></td>
           </tr>
       </table>
       
       <center><button ng-click="flag=true">添加新用户</button></center>
       
       <form   ng-show="flag">
           <label>
               用户名:<input ng-model="uname" /> 
           </label>
           <label>
               密码:<input ng-model="upwd" /> 
           </label>
           <label>
               年龄:<input ng-model="uage" type="number" /> 
           </label>
           <label>
               性别:
               <select ng-model="sex">
                   <option>男</option>
                   <option>女</option>
               </select>

               
           </label>
           <button ng-click="save()">保存</button>
       </form>
   </body>
</html>

增删改查1