AngularJS的表单交互-优快云博客

本文介绍了一个使用AngularJS实现的用户信息管理系统，包括用户信息的增删改查、批量操作及筛选等功能。通过实例展示了如何利用AngularJS进行前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

monikaoshi.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.users=[
                          {id:1,name:'张三',mima:'123',age:'22',sex:'男',done:false},
                          {id:2,name:'李四',mima:'456',age:'28',sex:'女',done:false},
                          {id:3,name:'王五',mima:'789',age:'12',sex:'女',done:false},
                          {id:4,name:'赵六',mima:'000',age:'30',sex:'男',done:false},
                          ];
            //按姓名模糊查询
            $scope.sr="";
           //按年龄区间进行模糊查询
            $scope.ff="--请选择--";
            $scope.agefilter=function (item) {
               $scope.ss= $scope.ff;

               if( $scope.ss!="--请选择--"){
                   var arr=$scope.ss.split("-");
                   var min=arr[0];
                   var max=arr[1];
                   if(item.age<min||max<item.age){
                       return false;
                   }else {
                       return true;
                   }
               }else{
                   return true;
               }
            }

            //按性别进行模糊
            $scope.sexjb="--请选择--";
            $scope.sexbb=function (item) {
                $scope.nan=$scope.sexjb;
              if( $scope.nan==item.sex){

                  if( $scope.nan=="男"){

                      return $scope.nan="男";
                  }else {
                      return $scope.nan="女";
                  }
              }
              if($scope.nan=="--请选择--"){

                    return item.sex;
                }

            }
           //进行全选
            $scope.zj=false;
            $scope.qx=function () {

                for(var i=0;i<$scope.users.length;i++){
                    if($scope.zj==true){
                        $scope.users[i].done=true;
                    }else{
                        $scope.users[i].done=false;
                    }

                }
            }
         //进行反选
            $scope.fx=function () {
                for(var i=0;i<$scope.users.length;i++){
                    if( $scope.users[i].done==true){
                        $scope.zj=true;
                    }else{
                        $scope.zj=false;
                    }
                }
            }
          //进行全部删除
          $scope.delAll=function () {
              for(var i=0;i<$scope.users.length;i++){
                  $scope.users.splice(i,1);
                  i--;
              }

          }
          //进行批量删除
            $scope.del=function () {
                for(var i=0;i<$scope.users.length;i++) {
                    if($scope.users[i].done==true){
                        $scope.users.splice(i,1);
                        i--;
                    }
                }
            }
          //修改密码
            $scope.mm="22"
            $scope.xg=function (mima,index) {

                alert($scope.mm)
            }

         //实现添加的功能
            $scope.name="";
            $scope.mima="";
            $scope.age="";
            $scope.sex="";
            $scope.add=function () {

                $scope.sub=function () {
                    $scope.id=$scope.users.length+1;
                    $scope.users.push({id:$scope.id,name: $scope.name,mima:$scope.mima,age:$scope.age,sex:$scope.sex,done:false});
                }

            }

        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
  <div>
      <h1>用户信息表</h1>
  <input type="text" placeholder="用户名查询" ng-model="sr"/>
  年龄：
      <select ng-model="ff">
      <option>--请选择--</option>
      <option>20-25</option>
      <option>26-30</option>
     </select>
      性别：
      <select ng-model="sexjb">
          <option>--请选择--</option>
      <option>男</option>
      <option>女</option>
      </select>
    <button ng-click="delAll()">全部删除</button>
    <button ng-click="del()">批量删除</button>
      <table>
          <tr>
              <th><input type="checkbox" ng-model="zj" ng-click="qx()"/>全选</th>
              <th>ID</th>
              <th>用户名</th>
              <th>密码</th>
              <th>年龄</th>
              <th>性别</th>
              <th>操作</th>
          </tr>
          <tr ng-repeat="item in users|filter:sr|filter:agefilter|filter:sexbb">
              <td><input type="checkbox" ng-model="item.done" ng-click="fx(item)"/></td>
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.mima}}</td>
              <td>{{item.age}}</td>
              <td>{{item.sex}}</td>
               <td><button ng-click="xg(item.mima,$index)">修改密码</button></td>

          </tr>
      </table>
            <button id="bu" ng-click="add()">添加用户</button>
      <table class="tab">
          <tr>
              <th>用户名：</th>
              <td><input type="text" placeholder="请输入用户名" ng-model="name"/></td>
          </tr>
          <tr>
              <th>密码：</th>
              <td><input type="text" placeholder="请输入密码" ng-model="mima"/></td>
          </tr>
          <tr>
              <th>年龄：</th>
              <td><input type="text" placeholder="请输入年龄" ng-model="age"/></td>
          </tr>
          <tr>
              <th>性别：</th>
              <td><input type="text" placeholder="请输入性别" ng-model="sex"/></td>
          </tr>
          <tr>

              <td colspan="2"><button ng-click="sub()">提交</button></td>
          </tr>
      </table>

  </div>
</body>
</html>

style.css

body{
    width: 1000px;
    height: 1200px;
}
div{
    width: 600px;
    height: 600px;
    margin: 0 auto;
    text-align: center;
}
#bu{

    text-align: center;
    background:blue;
}
.tab tr td{
    border: solid 1px black;
    text-align: center;
}
.tab tr th{
    border: solid 1px black;
    text-align: center;
}
.tab{
    margin: 0 auto;
}