AngularJS+用户查询+添加用户+修改密码

最新推荐文章于 2017-11-22 13:13:08 发布
最新推荐文章于 2017-11-22 13:13:08 发布
阅读量511 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/logitech12/article/details/78348859
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS+添加用户+修改密码</title>
    <style>
        *{
            margin: 0 auto;
        }
        .box{
            width: 800px;
            height: 1000px;
        }
    </style>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var app = angular.module("myapp",[]);
        app.controller("mycont",function ($scope) {
            //数据
            $scope.data = [{
                done:false,
                name:"张三",
                pass:123,
                age:22,
                sex:"女"
            },{
                done:false,
                    name:"李四",
                    pass:456,
                    age:44,
                    sex:"男"
            },{
                done:false,
                    name:"王五",
                    pass:789,
                    age:33,
                    sex:"女"
            },{
                done:false,
                name:"赵六",
                pass:234,
                age:55,
                sex:"男"
            }]
            //根据年龄范围下拉菜单实现用户显示
            $scope.ageSize = "--请选择--";
            $scope.ageFilter = function (item) {
                if ($scope.ageSize != "--请选择--"){
                    var ageSize = $scope.ageSize;
                    var arr = ageSize.split("-");
                    var min = arr[0];
                    var max = arr[1];
                    var age = item.age;
                    if(age<min || age>max){
                        return false;
                    } else {
                        return true;
                    }
                } else {
                    return true;
                }
            }
            //全部删除
            $scope.delAll = function () {
                $scope.data = [];
            }
            //批量删除
            $scope.del = function () {
                var n = 0;
                if (confirm("是否删除？")) {
                    for(var i=0;i<$scope.data.length;i++){
                        if ($scope.data[i].done == true){
                            $scope.data.splice(i,1);
                            i--;
                            n++;
                        }
                    }
                }
                if (n==0) {
                    alert("请勾选。。。");
                }
            }
            //全选
            $scope.checkAll = function () {
                for(var i=0;i<$scope.data.length;i++){
                    if ($scope.check == true){
                        $scope.data[i].done = true;
                        n=$scope.data.length;
                    } else {
                        $scope.data[i].done = false;
                    }
                }
            }
            //反全选
            var n = 0;
            $scope.fx = function (index) {
                if ($scope.data[index].done == true){
                    n++;
                } else {
                    n--;
                }
                console.log(n);
                /*console.log($scope.data.length);*/
                if (n==$scope.data.length) {
                    $scope.check = true;
                } else {
                    $scope.check = false;
                }
            }
            //添加用户
            $scope.show = false;
            $scope.add = function () {
                $scope.show = true;
            }
            $scope.tj = function () {
                if($scope.addname!=null&&$scope.addage>10&&$scope.addage<60){
                    $scope.data.push({done:false,name:$scope.addname,pass:$scope.addpass,age:$scope.addage,sex:$scope.addsex});
                } else {
                    alert("不满足条件");
                }
                $scope.addname="";
                $scope.addpass="";
                $scope.addage="";
                $scope.addsex="";
                $scope.show = false;
            }
            //修改密码
            $scope.shows = false;
            $scope.up = function (index) {
                $scope.shows = true;
                var data = $scope.data[index];
                $scope.name = data.name;
                $scope.index = index;
            }
            $scope.tjpass = function () {
                if ($scope.data[$scope.index].pass != $scope.pass) {
                    alert("旧密码输入不符");
                    return;
                } else if ($scope.uppass != $scope.upsure) {
                    alert("两次新密码输入不一致");
                    return;
                }
                $scope.data[$scope.index].pass = $scope.uppass;
                $scope.name ="";
                $scope.pass="";
                $scope.uppass="";
                $scope.upsure="";
                $scope.shows = false;
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="mycont">
<div class="box">
    <br>
    <h2 style="padding-left: 300px">用户信息表</h2>
    <br>
    <div style="padding-left: 100px">
        <input type="text" placeholder="用户名查询" ng-model="search">&nbsp;
        年龄 : <select ng-model="ageSize">
            <option>--请选择--</option>
            <option>11-20</option>
            <option>21-30</option>
            <option>31-40</option>
            <option>41-50</option>
            <option>51-60</option>
        </select>&nbsp;
        性别 : <select ng-model="sear">
            <option></option>
            <option>男</option>
            <option>女</option>
        </select>&nbsp;
        <button ng-click="delAll()">全部删除</button>
        <button ng-click="del()">批量删除</button>
    </div>
    <br/>
    <table cellpadding="10" cellspacing="1" border="soild 1px #000">
        <tr>
            <th><input type="checkbox" ng-click="checkAll()" ng-model="check">全选</th>
            <th>ID</th>
            <th>用户名</th>
            <th>密码</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr ng-repeat="item in data|filter:{name:search}|filter:{sex:sear}|filter:ageFilter">
            <td><input type="checkbox" ng-model="item.done" ng-click="fx($index)"></td>
            <td>{{$index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.pass}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td><button ng-click="up($index)">修改密码</button></td>
        </tr>
    </table>
    <br/><br/>
    <div style="width: 100px; height: 60px;"><button ng-click="add()">添加用户</button></div>
    <div ng-show="show">
        <table cellpadding="10" cellspacing="1" border="soild 1px #000">
            <tr>
                <td>用户名:</td>
                <td><input type="text" placeholder="请输入用户名" ng-model="addname"></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="text" placeholder="请输入密码" ng-model="addpass"></td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input type="text" placeholder="请输入年龄" ng-model="addage"></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td><input type="text" placeholder="请输入性别" ng-model="addsex"></td>
            </tr>
            <tr align="center">
                <td colspan="2"><button ng-click="tj()">提交</button></td>
            </tr>
        </table>
    </div>
    <div ng-show="shows">
        <table cellpadding="10" cellspacing="1" border="soild 1px #000">
            <tr>
                <td>用户名:</td>
                <td><input type="text" placeholder="用户名" ng-model="name"></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="uppass"></td>
            </tr>
            <tr>
                <td>确认:</td>
                <td><input type="text" placeholder="请确认" ng-model="upsure"></td>
            </tr>
            <tr align="center">
                <td colspan="2"><button ng-click="tjpass()">提交</button></td>
            </tr>
        </table>
    </div>
    <p></p>
</div>
</body>
</html>
Logitech12
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJs+用户信息表基本功能实现
xingyueyezi01的博客
10-22 329
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>综合练习</title> <style> .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; }
AngularJS用户添加,密码修改
c_bulrush的博客
09-21 409
案例效果:代码实现:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://cdn.bootcss.com/angular.js/1.3.15/angular.min.js"></script> <style>
angular js 修改密码
lyb249473330的博客
09-21 382
angular js 修改密码
angularja修改密码
RenZjun的博客
10-23 367
用户管理 - 修改密码             var example_data = [             {                 id: 1,                 name: "曹操",                 password: "123456",                 age: 45,                 sex:
查询与删除
qq_40072139的博客
10-23 181
用户管理             var example_data = [             {                 id: 1,                 name: "曹操",                 password: "123456",                 age: 45,                 sex: "男"  
AngularJS获取密码
牛栏山矿泉水
11-15 86
1、设计源码 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;AngularJS获取密码&lt;/title&gt; &lt;script type="text/javascript" src="angular.js&quo
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
10-19
主要介绍了Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法,需要的朋友可以参考下
Social-Network-AngularJS:SoftUni 的 JS 框架与 AngularJS 课程的课程项目
06-02
#Social-Network-AngularJS 网页设计 CSS3 风格化 AngularJS 项目结构 高质量代码 ... 更改密码 登出 授权 访客授权检查 用户授权检查 仅访问自己的新闻提要 只在朋友墙上张贴 只评论朋友的帖子 删除
angularjs-sharepoint-authentication:高级别的angularJS服务，可在线验证Sharepoint
05-18
angularjs共享点身份验证通过此简单的angularJS服务，您可以在线验证共享点。 默认情况下，它已添加到名为app的角度模块中。 不要忘记将模块名称更改为所需的模块。注入“ SharepointOnlineAuthenticator”服务。...
fullstack_bp:使用 Express 4、MongoDB、AngularJS 和 JWT Auth 的全栈 MEAN 样板
05-31
非常基本的用户管理（添加/删除用户、锁定帐户、重置密码、更改名称、更改电子邮件等） “随机”背景指令可让您在 dev =p 时保持清醒 密码强度和有效的电子邮件指令 ###安装说明： 您需要创建一个名为config的目录...
angularjs之修改密码
沐吾
05-26 1405
修改密码逻辑思维 首先要输入旧的密码，判断旧的密码是否正确（后台判断） 其次输入新的密码，判断新密码格式（可增加） 最后判断新密码和确认密码输入是否一致 html部分 class="form-horizontal" role="form"> class="form-group"> class="col-sm-2 control-label">class="importan
angularJS密码输入
gh323093的博客
11-22 861
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script type="text/javascript" src="../jquery-1.11.1/jquery-1.11.1.js">script> script type="text/javascript" src="../
1xbet.apk
最新发布
06-04
1xbet.apk
基于Matlab的BP神经网络的非线性系统建模-非线性函数拟合
06-04
【作品名称】：基于Matlab的BP神经网络的非线性系统建模-非线性函数拟合 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：基于Matlab的BP神经网络的非线性系统建模-非线性函数拟合
java等值面图片生成代码实现功能.zip
06-04
采用java引用geotools生成等值面，集成sld按照指定样式生成等值面图片
111.py
06-04
111.py
2247.瑞金北关杨氏族谱： 不分卷：[江西瑞金].pdf
06-04
2247.瑞金北关杨氏族谱： 不分卷：[江西瑞金]
100MB.xls111
06-04
100MB.xls111
使用 crow + angularjs 搭建单页面
06-08
在 AngularJS 应用程序的 app.js 文件中，添加以下代码来定义一个名为 HomeController 的控制器： ```javascript angular.module('myapp') .controller('HomeController', function($scope, $http) { $http.get('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值