angular.js 增删改查练习1

最新推荐文章于 2022-07-20 11:06:29 发布
最新推荐文章于 2022-07-20 11:06:29 发布
阅读量467 收藏
点赞数 
<!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">≤ 1</option>
        <option value="2">≤ 2</option>
        <option value="3">≤ 3</option>
        <option value="4">≤ 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>

效果如下:

敏感词：抢劫、小偷
ID用户名密码级别创建时间操作
{{ user.id }}{{ user.name }}{{ user.password }}{{ user.level }}{{ user.dt_created }} 
新增用户
用户名
密码
重复密码
级别
  • 密码不能为空！
  • 密码长度不能小于6个字符！
  • 两次密码输入不一致！
修改密码
用户名
旧密码
新密码
重复密码
  • 旧密码不能为空！
  • 旧密码不正确！
  • 新密码不能为空！
  • 新密码长度不能小于6个字符！
  • 两次密码输入不一致！




















LXYNLYXY
关注
用户表格创建游戏数据
08-02
怎麼使用UE4來實現游戏配置呢？ XML是我们常用的格式，但是对于虚幻4的导入，目前可以支持的Json,csv,自己写代码读取XML也咩有问题。
Angular js 增删改查
Fangs.Chriss的博客
03-31 267
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt;  &lt;meta charset="utf-8" /&gt;  &lt;title&gt;&lt;/title&gt;  &lt;style&gt;   tbody tr:nth-child(odd){    background-color: aqua;   }   tbody t
【创建用户表格】
weixin_45736311的博客
11-19 139
视频教程 复制elementUI这种效果的代码 对复制过来的代码进行修改 先处理数据，修改所需要的数据 最终结果： 第一列：编号 第二列：姓名 鼠标移动到姓名上后会自动弹出一个弹框，展示姓名和住址两项信息 第三、四、五列：生日、性别、住址 第六列：放置一个搜索框 在这个搜索栏中输入关键字，达到数据过滤的效果： 回到elementUI中复制这行代码 同时当前列下还包含的是两个按钮（编辑/删除） 下面进行从后端动态获取数据 后端新建数据库，写入所需要的字段 安装/引入axios
启用用户布局表格
weixin_33856370的博客
04-30 81
转载于:https://www.cnblogs.com/zouhuaxin/p/10794448.html
网页模板——vue实现动态表格数据查询筛选代码.zip
11-23
网页模板——vue实现动态表格数据查询筛选代码
angular.js 增删改查练习2
LXYNLYXY的博客
10-25 514
订单管理 * { font-size: 14px; margin: 0; padding: 0; } body { padding: 16px 32px; } .filter {
增删改查
02-15
"增删改查"（Create, Read, Update, Delete，简称CRUD）是数据库操作的基础，也是任何数据管理系统的四大核心功能。在JavaScript编程中，这些操作通常用于处理前端与后端之间的数据交互，尤其是在构建Web应用时。...
Spring&boot;mybatis;增删改查前后端分离分页demo
11-07
【Spring Boot & MyBatis 增删改查与前后端分离分页实践】 Spring Boot 和 MyBatis 是两个在现代 Java 开发中非常流行的框架。Spring Boot 提供了一种快速构建应用程序的方式，通过简化配置和自动绑定依赖，极大地...
z-tree,增删改查
12-04
在IT行业中，"z-tree"通常指的是一个JavaScript库，...总的来说，"z-tree,增删改查"的项目涵盖了前端UI设计、用户交互、数据操作以及前后端通信等多个方面，是一个全面的Web开发练习，有助于提升开发者的技术综合能力。
01.笔记1
08-03
在练习项目中，比如用户管理系统，可以结合Bootstrap的UI组件库，利用Vue.js 的数据绑定和指令来实现用户列表的增删改查等操作，同时利用事件处理来响应用户的交互，例如点击按钮时触发相应的方法。 总之，Vue.js ...
练习js
03-01
3. **DOM操作**：Document Object Model（DOM）是HTML和XML文档的结构化表示，JS通过DOM API可以对网页元素进行增删改查，实现动态效果。 4. **事件处理**：事件是用户或浏览器行为的触发点，如点击按钮、滚动页面...
Mysql 查看用户表格
CAI____NIAO的博客
02-25 3590
1.查看所有数据库 show databases； 这个语句能够显示出所有的数据库，能够显示出来一些workbench未显示的数据库，如图所示： 2.查看mysql数据库中所有表格： show tables from mysql; 可以看到有一个名为user的表格； 3.查询user表格： select * from mysql.user; 可以查到用户名、密码的详细信息 ...
Web页面table表格，实现快速筛选
u012972294的博客
07-20 2954
Web页面table表格，实现快速筛选
Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能
weixin_34130269的博客
06-03 6982
与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部分filter功能做准备。 需求分析 还是先从需求入手，想想实现这样一个功能需要注意什么、大致流程如何、有哪些应用...
山东石油化工学院在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-04
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
2024嵌入式大厂面经50套大厂高频面试题资料
最新发布
10-04
2024嵌入式大厂面经50套大厂高频面试题资料
eclipaint-eclipse插件
10-04
eclipaint-eclipse插件
基于XUI、XUtil、XAOP等框架的TemplateAppProject设计源码
10-04
该TemplateAppProject是一个基于XUI、XUtil、XAOP等框架构建的Android模版空壳工程，包含172个文件，涵盖68个Java源文件、64个XML配置文件、17个PNG图片文件、6个Gradle脚本文件、2个YAML配置文件、2个Git忽略文件、2个文本文件和1个Markdown文件。该工程集成了XPage、XUpdate和XHttp2等功能，旨在快速搭建Android应用开发环境。
angular js写增删改查代码实现
07-25
下面是使用AngularJS实现增删改查的示例代码： HTML模板： ```html <div ng-app="myApp" ng-controller="myCtrl"> <h2>用户列表</h2> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="user in users"> <td>{{user.name}}</td> <td>{{user.age}}</td> <td> <button ng-click="editUser(user)">编辑</button> <button ng-click="deleteUser(user)">删除</button> </td> </tr> </tbody> </table> <h2>添加/编辑用户</h2> <form ng-submit="saveUser()"> <label>姓名:</label> <input type="text" ng-model="currentUser.name" required /> <br /> <label>年龄:</label> <input type="number" ng-model="currentUser.age" required /> <br /> <button type="submit">保存</button> </form> </div> ``` AngularJS控制器： ```javascript var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.users = [ { name: '张三', age: 20 }, { name: '李四', age: 25 }, { name: '王五', age: 30 } ]; $scope.currentUser = {}; $scope.editUser = function(user) { $scope.currentUser = angular.copy(user); }; $scope.saveUser = function() { if ($scope.currentUser.name && $scope.currentUser.age) { if ($scope.currentUser.hasOwnProperty('$index')) { $scope.users[$scope.currentUser.$index] = angular.copy($scope.currentUser); } else { $scope.users.push(angular.copy($scope.currentUser)); } $scope.currentUser = {}; } }; $scope.deleteUser = function(user) { var index = $scope.users.indexOf(user); if (index > -1) { $scope.users.splice(index, 1); } }; }); ``` 上述代码实现了一个简单的用户列表，包含姓名和年龄字段。用户可以添加、编辑和删除用户信息。使用ng-repeat指令在表格中显示用户列表，通过ng-click指令调用相应的方法进行编辑和删除操作，ng-model指令绑定用户输入的数据。保存时，根据当前用户是否包含索引属性来判断是新增还是编辑操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值