Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法


Posted in Javascript onOctober 24, 2017

小编在上篇文章给大家介绍了AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息),今天给大家介绍Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法,具体内容如下所示:

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    table{
      border-collapse: collapse;
    }
    th,td{
      padding: 10px;
      border: 1px solid #000000;
    }
  </style>
  <script src="../angular-1.5.5/angular.min.js"></script>
  <script>
    var myapp = angular.module("myapp",[]);
    myapp.controller("myCtrl",function ($scope) {
       $scope.data = [{
         "id":1,
         "name":"张三",
         "pwd":"123",
         "age":22,
         "sex":"男",
         "check":false
       },
         {
           "id":2,
           "name":"李四",
           "pwd":"456",
           "age":33,
           "sex":"男",
           "check":false
         },
         {
           "id":3,
           "name":"王五",
           "pwd":"789",
           "age":44,
           "sex":"女",
           "check":false
         }];
      $scope.show = false;
       //添加用户
      $scope.add = function () {
        $scope.show = true;
      }
        //添加
        $scope.submit = function () {
          if($scope.name==""){
            alert("请输入姓名")
          }else if($scope.correct==true){
            //进行修改的操作
            $scope.data[$scope.index].pwd = $scope.pwd;
          }else{
            //添加的操作
            $scope.data.push({"name":$scope.name,"pwd":$scope.pwd,"age":$scope.age,"sex":$scope.sex});
            $scope.show = false;
          }
      }
      //用户名查询。不能含有敏感字
      $scope.search = "";
      $scope.search2 ="";
      //监听输入框的内容
      $scope.$watch("search",function (value) {
        if(value.indexOf("我")!=-1){
          alert("含有敏感字");
          $scope.search = "";
        }else{
          $scope.search2 = $scope.search;
        }
      });
      //年龄筛选
      $scope.opt = "请选择";
      $scope.ageFilter = function (item) {
        if($scope.opt!="请选择"){
          var opt = $scope.opt;
          var ageArr = opt.split("-");
          var max = ageArr[1];
          var min = ageArr[0];
          var age = item.age;
          if(age<min||age>max){
           return false;
          }else{
            return true;
          }
        }else{
          return true;
        }
      };
      //性别筛选
     $scope.sexthis = "请选择";
     $scope.sexFun = function (item) {
       if($scope.sexthis!="请选择"){
         //如果性别==男||性别==女
         if(item.sex==$scope.sexthis)
          {
           return true;
         }else{
           return false;
         }
       }else{
         return true;
       }
     }
      //全选
      $scope.checkAll = false;
      $scope.checkWhat = function () {
        if ($scope.checkAll == true) {
          for (var i = 0; i < $scope.data.length; i++) {
            $scope.data[i].check = true;
          }
        } else {
          for (var i = 0; i < $scope.data.length; i++) {
            $scope.data[i].check = false;
          }
        }
      };
      //反选
      var n = 0;
      $scope.checkIt =function (index) {
        console.log(index)
       if($scope.data[index].check==true){
          n++;
        }else{
          n--;
        }
        if(n==$scope.data.length){
          $scope.checkAll=true;
        }else{
          $scope.checkAll = false;
        }
      };
      //点击修改密码
      $scope.correct = function (index) {
        $scope.show = true;
        $scope.name = $scope.data[index].name;
        $scope.pwd = $scope.data[index].pwd;
        //写入一个状态值
        $scope.correct = true;
        //记录索引
        $scope.index = index;
      }
      //全部删除
      $scope.delAll = function () {
        $scope.data.length=0;
      }
      //批量删除
      $scope.del = function () {
        for(var i = 0;i<$scope.data.length;i++){
          if($scope.data[i].check ==true){
            $scope.data.splice(i,1);
            i--;
          }
        }
      }
    })
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h2>用户信息表</h2>
<input type="text" placeholder="用户名查询" ng-model="search">
年龄<select ng-model="opt" ng-change="fun()">
  <option>请选择</option>
  <option>10-20</option>
  <option>20-30</option>
  <option>30-40</option>
</select>
性别<select ng-model="sexthis" ng-change="fun()">
  <option>请选择</option>
  <option>男</option>
  <option>女</option>
</select>
<button ng-click="delAll()">全部删除</button>
<button ng-click="del()">批量删除</button>
<table>
  <thead>
  <tr>
    <th><input type="checkbox" ng-model="checkAll" ng-click="checkWhat()"></th>
    <th>id</th>
    <th>用户名</th>
    <th>密码</th>
    <th>年龄</th>
    <th>性别</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="item in data|filter:{name:search2}|filter:ageFilter|filter:sexFun">
    <td><input type="checkbox" ng-model="item.check" ng-click="checkIt($index)"></td>
    <td>{{$index}}</td>
    <td>{{item.name}}</td>
    <td>{{item.pwd}}</td>
    <td>{{item.age}}</td>
    <td>{{item.sex}}</td>
    <td><button ng-click="correct($index)">修改密码</button></td>
  </tr>
  </tbody>
</table>
<button ng-click="add()">添加用户</button>
<ul ng-show="show">
  <li>用户名<input type="text" placeholder="请输入用户名" ng-model="name"></li>
  <li>密码<input type="text" placeholder="请输入密码" ng-model="pwd"></li>
  <li>年龄<input type="text" placeholder="请输入年龄" ng-model="age"></li>
  <li>性别<input type="text" placeholder="请输入性别" ng-model="sex"></li>
  <li><button ng-click="submit()">提交</button></li>
</ul>
</body>
</html>

总结

以上所述是小编给大家介绍的Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
javascript不可用的问题探究
Oct 01 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 #Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 #Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 #Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 #Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 #Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 #Javascript
详解基于Vue+Koa的pm2配置
Oct 24 #Javascript
You might like
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
JavaScript中的事件处理
2008/01/16 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
python读写配置文件操作示例
2019/07/03 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
Python-opencv 双线性插值实例
2020/01/17 Python
python破解同事的压缩包密码
2020/10/14 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
后勤岗位职责
2013/11/26 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
限期整改通知书
2015/04/22 职场文书
回复函格式及范文
2015/07/14 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
四十九个javascript小知识实用技巧
2021/11/20 Javascript