AngularJS的表单的处理

最新推荐文章于 2025-05-24 12:16:57 发布
原创最新推荐文章于 2025-05-24 12:16:57 发布 · 577 阅读
0 ·
CC 4.0 BY-SA版权
Angularjs 专栏收录该内容
23 篇文章
订阅专栏
本文介绍了一个使用AngularJS实现的用户信息管理系统，包括用户信息的增删改查、过滤及批量操作等功能。通过实例展示了如何利用AngularJS进行前端数据管理和交互。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.users=[
                {id:1,name:'张三',mima:'123',age:'20',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.age="--请选择--";
            $scope.agefilter=function (item) {
                if($scope.age!="--请选择--"){
                    var arr=$scope.age.split("-");
                    var min=arr[0];
                    var max=arr[1];
                    if(item.age<min||item.age>max){
                        return false
                    }else{
                        return true;
                    }
                }else {
                    return true;
                }

            }

            //实现性别的过滤
            $scope.sex="--请选择--";
            $scope.sexfilter=function (item) {
                if( $scope.sex!="--请选择--"){
                    if(item.sex==$scope.sex){
                        if($scope.sex=="男"){
                            return item.sex="男";
                        }else{
                            return item.sex="女";
                        }
                    }
                }else
                    {
                    return true;
                }
            }
            //进行全选
            $scope.qx=false;
            $scope.quanxuan=function () {

                if($scope.qx==true){
                    for(var i=0;i<$scope.users.length;i++){
                        $scope.users[i].done=true;
                    }
                }else  if($scope.qx==false){
                    for(var i=0;i<$scope.users.length;i++){
                        $scope.users[i].done=false;
                    }
                }
            }
            //进行反选
           $scope.fx=function () {
               $scope.n=0;
               for(var i=0;i<$scope.users.length;i++){
                  if($scope.users[i].done==true){
                      $scope.n++;
                  } else {
                      $scope.n--;
                  }
               }
               if($scope.n==$scope.users.length){
                   $scope.qx=true;
               }else{
                   $scope.qx=false;
               }
           }
           //全部删除
            $scope.delAll=function () {
                if($scope.qx==true){
                    $scope.users.length=0;
                }
            }
            //批量删除
            $scope.dele=function () {
                for(var i=0;i<$scope.users.length;i++){
                    if($scope.users[i].done==true){
                        $scope.users.splice(i,1);
                        i--;
                    }
                }
            }
           //实现添加的功能

            $scope.xm="";
            $scope.pass="";
            $scope.nl="";
            $scope.xb="";
            $scope.show=false;
             $scope.add=function () {
                 $scope.show=true;

               $scope.sub=function () {
                   //用户名非空
                   if( $scope.xm==""||$scope.xm==null){
                       alert("姓名不能为空")
                   }else {
                       //年龄在10到60之间
                       if(  $scope.nl>=10&&$scope.nl<=60){
                           $scope.users.push({id: $scope.users.length+1,name:$scope.xm,mima:$scope.pass,age:$scope.nl,sex:'男',done:false})
                       }
                   }
               }

             }
           //修改密码
            $scope.xg=function (index) {
                 $scope.show=true;
                 $scope.sub=function () {
                     if($scope.users[index].mima==$scope.pass){
                         alert("修改后的密码不能和原密码相同！！")
                     }else{
                         $scope.users[index].mima=$scope.pass;
                     }
                 }

            }


        });
    </script>
    <style>
        h1{
            text-align: center;
        }
        p{
            text-align: center;
        }
        .table{
            margin: 0 auto;
            text-align: center;
            border: 1px solid black;
            width: 500px;
            border-collapse: collapse;
        }
        table tr td{
            border: 1px solid black;
        }
        .button{
            text-align: center;
            width: 80px;
            height: 30px;
            background: #45BDFF;
           margin-left: 500px;
            margin-top: 10px;
        }
        table{
            margin: 0 auto;
            text-align: center;
            border: 1px solid black;
            width: 500px;
            border-collapse: collapse;
        }
    </style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
 <h1>用户信息表</h1>
 <p>
     <input type="text" placeholder="用户名查询" ng-model="name"/>
     年龄：<select ng-model="age">
             <option>--请选择--</option>
              <option>10-20</option>
              <option>21-30</option>
              <option>31-40</option>
           </select>
       性别：<select ng-model="sex">
     <option>--请选择--</option>
     <option>男</option>
     <option>女</option>
            </select>
     <button ng-click="delAll()">全部删除</button>
     <button ng-click="dele()">批量删除</button>
 </p>
  <table class="table">
      <tr>
          <th><input type="checkbox" ng-model="qx" ng-click="quanxuan()"/>全选</th>
          <th>ID</th>
          <th>用户名</th>
          <th>密码</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
      </tr>
      <tr ng-repeat="item in users|filter:{name:name}|filter:agefilter|filter:sexfilter">
          <td><input type="checkbox" ng-model="item.done" ng-click="fx()"/></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($index)">修改密码</button></td>
      </tr>
  </table>

    <button class="button" ng-click="add()">添加用户</button>

    <table ng-show="show">
        <tr>
            <td>用户名：</td>
            <td><input type="text"placeholder="请输入用户名" ng-model="xm"/></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="text"placeholder="请输入密码" ng-model="pass"/></td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td><input type="text"placeholder="请输入年龄" ng-model="nl"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input type="text"placeholder="请输入性别" ng-model="xb"/></td>
        </tr>
        <tr>
            <td colspan="2"><button ng-click="sub()">提交</button></td>
        </tr>
    </table>
</body>
</html>