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 相关文章推荐
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
vue v-for直接循环数字实例
Nov 07 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
PHP 和 MySQL 基础教程(二)
2006/10/09 PHP
如何使用Strace调试工具
2013/06/03 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python线程指南分享
2019/11/19 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
params有什么用
2016/03/01 面试题
UNIX文件类型
2013/08/29 面试题
自我鉴定范文
2013/11/10 职场文书
运动会领导邀请函
2014/01/10 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android