AngularJS的表单交互

来源：互联网发布：数据库系统阶段特点编辑：程序博客网时间：2024/06/16 17:55

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;}

阅读全文

0 0