angularjs实现 - 增加/删除/修改/查询/排序（优化界面）

最新推荐文章于 2018-05-19 18:09:18 发布
最新推荐文章于 2018-05-19 18:09:18 发布
阅读量764 收藏
点赞数 1
分类专栏： html5+css3 javascript angularjs jquery 文章标签： jquery html css angularjs 界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luck_whr/article/details/78336871
版权
html5+css3 同时被 3 个专栏收录
23 篇文章 1 订阅
订阅专栏
javascript
22 篇文章 1 订阅
订阅专栏
angularjs
9 篇文章 0 订阅
订阅专栏

主界面效果：

这里写图片描述

添加信息效果：

这里写图片描述

修改信息效果：

这里写图片描述

上面这张图片就是我们将要实现的效果，包括添加信息、修改信息、查询信息、删除信息、对信息排序！

与上一篇文章不同的是：优化了界面效果，输入信息错误出现提示

将要用到：HTML，CSS，AngularJS，jQuery

代码如下：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <script type="text/javascript" src="data.js"></script>
    <title>用户管理</title>
    <style type="text/css">
        * {
            font-size: 14px;
            margin: 0;
            padding: 0;
        }

        body {
            padding: 16px 32px;
        }

        .search {
            position: relative;
            width: 640px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
        }

        .search input {
            width: 152px;
            height: 24px;
            border: 1px solid #999;
            border-radius: 4px;
            padding-left: 8px;
        }

        .search select {
            width: 86px;
            height: 24px;
            border: 1px solid #999;
            border-radius: 4px;
        }

        .search .sort {
            position: absolute;
            right: 0;
            top: 8px;
        }

        .btns {
            width: 640px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
        }

        .btns button {
            width: 80px;
            height: 24px;
            background-color: green;
            border: 0;
            border-radius: 4px;
            color: white;
        }

        .btns .remove_btn {
            background-color: red;
        }

        .list {
            width: 640px;
            margin: 0 auto;
        }

        .list thead tr {
            background-color: #777;
        }

        .list tbody tr:nth-child(odd) {
            background-color: #ccc;
        }

        .list tbody tr:nth-child(even) {
            background-color: #fff;
        }

        .form {
            width: 460px;
            border: 1px solid #999;
            margin: 0 auto;
        }

        .formErr {
            border: 1px solid red;
        }

        .form .label {
            display: block;
            float: left;
            width: 80px;
            height: 40px;
            line-height: 40px;
            text-align: end;
        }

        .form .txt {
            display: block;
            float: left;
            width: 340px;
            height: 40px;
            line-height: 40px;
            padding-left: 16px;
        }

        .form input {
            width: 312px;
            height: 24px;
            border: 1px solid #999;
            border-radius: 4px;
            padding-left: 8px;
        }

        .form select {
            width: 64px;
            height: 24px;
            border: 1px solid #999;
            border-radius: 4px;
        }

        .form button {
            width: 56px;
            height: 24px;
            background-color: green;
            border: 0;
            border-radius: 4px;
            color: white;
        }

        .form .errTips {
            width: 226px;
            background-color: lightpink;
            color: darkred;
            border-radius: 4px;
            margin-left: 96px;
            margin-top: 6px;
            margin-bottom: 4px;
            padding: 16px 48px;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module("myApp", []);

        app.controller("myCtrl", function ($scope) {
            $scope.data = data;

            $scope.searchByLevel = function (user) {
                if ($scope.search_level == undefined || $scope.search_level == "") {
                    return true;
                }

                if (user.level <= $scope.search_level) {
                    return true;
                }

                return false;
            };

            $scope.orderByLevel = function (sortType) {
                if (sortType == "") {
                    return "";
                }

                if (sortType != 1 && sortType != 2) {
                    return "";
                }

                if (sortType == 2) {
                    return true;
                }

                return false;
            };
        });
    </script>
</head>
<body ng-controller="myCtrl">
<div class="search">
    <input type="text" placeholder="用户名搜索" ng-model="search_name"/>
    <select class="level" ng-model="search_level">
        <option value="">选择级别</option>
        <option value="1">&le; 1</option>
        <option value="2">&le; 2</option>
        <option value="3">&le; 3</option>
        <option value="4">&le; 4</option>
    </select>
    <select class="sort" ng-model="filter_sort">
        <option value="">排序</option>
        <option value="1">级别正序</option>
        <option value="2">级别倒序</option>
    </select>
</div>

<div class="btns">
    <button class="add_btn">新增用户</button>
    <button class="remove_btn">批量删除</button>
    <span>敏感词：抢劫、小偷</span>
</div>

<div class="list">
    <table width="640px" cellspacing="0" rules="cols" border="1px">
        <thead>
        <tr>
            <th width="6%">
                <input type="checkbox"/>
            </th>
            <th width="6%">ID</th>
            <th width="16%">用户名</th>
            <th width="18%">密码</th>
            <th width="10%">级别</th>
            <th width="32%">创建时间</th>
            <th width="12%">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="user in data | filter: {name: search_name} | filter: searchByLevel | orderBy: 'level': orderByLevel(filter_sort)">
            <td align="center">
                <input type="checkbox"/>
            </td>
            <td align="center">{{ user.id }}</td>
            <td align="center">{{ user.name }}</td>
            <td align="center">{{ user.password }}</td>
            <td align="center">{{ user.level }}</td>
            <td align="center">{{ user.dt_created }}</td>
            <td align="center">
                <button>修改密码</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div class="form">
    <div>
        <span class="label">新增用户</span>
        <span class="txt"></span>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label">用户名</span>
        <span class="txt"><input type="text" placeholder="6-20个字符"/></span>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label">密码</span>
        <span class="txt"><input type="password" placeholder="6-20个字符" class="formErr"/></span>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label">重复密码</span>
        <span class="txt"><input type="password" placeholder="再次输入密码"/></span>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label">级别</span>
        <span class="txt">
            <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </select>
        </span>
    </div>
    <div style="clear: both"></div>
    <div class="errTips">
        <ul>
            <li>密码不能为空！</li>
            <li>密码长度不能小于6个字符！</li>
            <li>两次密码输入不一致！</li>
        </ul>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label"></span>
        <span class="txt"><button>提交</button></span>
    </div>
    <div style="clear: both"></div>
</div>
<div class="form">
    <div>
        <span class="label">修改密码</span>
        <span class="txt"></span>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label">用户名</span>
        <span class="txt"><input type="text" value="曹操" readonly/></span>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label">旧密码</span>
        <span class="txt"><input type="password"/></span>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label">新密码</span>
        <span class="txt"><input type="password" placeholder="6-20个字符" class="formErr"/></span>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label">重复密码</span>
        <span class="txt"><input type="password" placeholder="再次输入密码"/></span>
    </div>
    <div style="clear: both"></div>
    <div class="errTips">
        <ul>
            <li>旧密码不能为空！</li>
            <li>旧密码不正确！</li>
            <li>新密码不能为空！</li>
            <li>新密码长度不能小于6个字符！</li>
            <li>两次密码输入不一致！</li>
        </ul>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label"></span>
        <span class="txt"><button>提交</button></span>
    </div>
    <div style="clear: both"></div>
</div>
</body>
</html>
人走丿茶凉
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AngularJs ng-change事件/指令的用法小结
01-19
本文介绍了AngularJs ng-change事件/指令的小结，分享给大家，也给自己留个笔记 定义和用法 ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。 ng-change 指令需要搭配 ng-model 指令使用。...
angular.element方法汇总(转)以及AngularJS 动态添加元素和删除元素
热门推荐
litao8976的博客
06-03 1万+
addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选
js动态添加与删除ul中的li
CCbleach的专栏
11-30 393
[*]11111111111111111 [*]22222222222222222 [*]33333333333333333 [*]44444444444444444 [*]55555555555555555 function del(n) { var s=document.getElementById('s'); var t=s...
angularJS(七)动态增加行
暖阳阳
05-19 4867
1.点击新建一个窗口 &lt;!-- entity={} :清空数据， entity.specificationOptionList=[{}]：为规格选项设置一个空表格 --&gt; &lt;button type="button" class="btn btn-default" title="新建" data-toggle="modal" ...
angularJS实现动态添加,删除div
qq_34527715的博客
03-31 7890
要实现的功能类似下图，动态添加或者删除div 点击 增加可添加一条div  点击删除可删除一条div HTML代码如下：（省略CSS样式代码了） class="accordion-inner"> class="alert alert-info fade in" ng-repeat="permission in permissions">授权给: id="" c
AngularJS 动态添加展示数据
ms
11-22 2583
AngularJS 动态添加展示数据
Angularjs2-绑定/单击
04-25
Angularjs2-绑定/单击
AngularJS ng-table插件设置排序
10-21
主要介绍了AngularJS ng-table插件设置排序的相关资料,需要的朋友可以参考下
AngularJs ng-repeat 嵌套如何获取外层$index
10-21
主要介绍了AngularJs ng-repeat 嵌套如何获取外层$index的相关资料,需要的朋友可以参考下
angularjs 实现动态添加控件
zhaolisha9232的博客
03-04 8595
实现下面这样的需求： 点击增加一块数据盘，会出现数据盘选项。 (1)最开始，想到原生javascript，jquery (appendChild()等方法结合angularjs来添加新的元素。但是突然发现控件里面的数据绑定，原生javascript没法控制。上 (2)网查资料，找到$compile服务，动态改变html内容。本以为这可以解决我的需求，但是仔细研究发现$
一个简单的员工信息增删改界面
07-31
要自己改一下数据库连接，超简单的界面
Angularjs(增删改+分页+弹框+Sql数据库)
03-01
初学Angularjs,网上下载了一个demo，但是只有分页,本人进行了在上面增加删除,修改,编辑,功能.并且动态更新页号页码,比较简单易懂,采用最简单的Mvc框架，大神绕路
AngularJS实现表格的增删改查（仅限前端）
12-11
用AngularJS实现对表格的增删改查（仅限前端），具体代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现表格的增删改查</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/h
用AngularJS做的静态的增删改查
10-24
用AngularJS做的静态的增删改查，对于初学者很有帮助的！
angular增删改查
07-23
本项目采用了angular技术实现了简单的品牌列表页面的增删查改
AngularJS的-查询列表
09-14
AngularJS的查询列表，适合刚刚接触AngularJS的人
HTML+CSS实现动画效果
人走丿茶凉
10-10 4242
hand中放置内部适配器，也就是css样式：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /*全局适配器{外边距：0； 内边距：0}*/ *{ margin: 0px; padding: 0px}
Android - 原生登录注册页面【仿】淘宝App
人走丿茶凉
01-18 4072
bean文件夹：解析数据 LoginBean.java private String msg; private String code; private DataBean data; public String getMsg() { return msg; } public void setMsg(String msg) {
angularjs ui-view的使用
最新发布
06-06
AngularUI Router 是一个用于 AngularJS 的第三方路由模块，可以实现多视图和嵌套路由等功能。 2. 在 HTML 中定义 `ui-view` 指令，用于展示视图。可以定义一个或多个 `ui-view`，每个指令可以使用一个名字来标识。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值