angularJs 表格添加删除修改查询方法
如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="agl/angular.min.js"></script>
<script>
var app=angular.module("mpp",[]);
app.controller("ctrl",function ($scope) {
$scope.arr=[];
$scope.add=function () {
$scope.arr.push({name:$scope.name,password:$scope.password,age:$scope.age,sex:$scope.sex})
}
$scope.submit=function () {
for (var i=0;i<$scope.arr.length;i++)
{
if($scope.arr[i].name==$scope.name2)
{
if($scope.arr[i].password==$scope.pass)
{
if($scope.pass2==$scope.pass){
$scope.arr[i].password=$scope.pass2;
}else{
alert("两次输入不一致");
}
}else {
alert("密码错误");
}
}else {
alert("用户名错误");
}
}
}
$scope.flag=false;
$scope.show=function () {
$scope.flag=true;
}
})
</script>
<link rel="stylesheet" href="css/style.css" rel="external nofollow" >
</head>
<body ng-app="mpp" ng-controller="ctrl">
<div class="inner">
<input type="text" placeholder="用户名查询" ng-model="user">
<input type="text" placeholder="年龄范围查询" ng-model="ages">
<select ng-model="sexs">
<option value="男">男</option>
<option value="女">女</option></select>
<button>全部删除</button>
<TABLE>
<tr>
<th>Id</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in arr|filter:{name:user}|filter:{age:ages}|filter:{sex:sexs}">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.password}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button ng-click="show()">修改密码</button></td>
</tr>
</TABLE>
<button ng-click="add()">添加用户</button>
<div class="conner">
<div class="add">
用户名：<input type="text" ng-model="name"><br>
密 码：<input type="password" ng-model="password"><br>
年 龄：<input type="text" ng-model="age"><br>
性 别：<select ng-model="sex">
<option value="男">男</option>
<option value="女">女</option></select><br>
</div>
<div class="update" ng-show="flag">
用户名：<input type="text" ng-model="name2"><br>
旧密码：<input type="text" ng-model="pass"><br>
新密码：<input type="password" ng-model="pass2"><br>
确认密码：<input type="password" ng-model="pass3"><br>
</div>
</div>
<button ng-click="submit()">提交</button>
</div>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
.inner{
margin: 20px auto;
text-align: center;
}
table{
margin: 10px auto;
text-align: center;
}
tr{
border-collapse: collapse;
}
tr th,td{
border:1px solid #000000;
width: 60px;
}
.conner{
width: 600px;
height: 300px;
background: #ffe7e0;
margin: 0 auto;
}
.add{
margin: 10px auto;
padding-top: 20px;
width: 260px;
height: 120px;
border: 2px solid #e42112;
}
.update{
width: 280px;
height: 120px;
border: 2px solid #e42112;
text-align: center;
margin: 10px auto;
padding-top: 20px;
}
以上这篇angularJs 表格添加删除修改查询方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
您可能感兴趣的文章:
- AngularJS实现表格的增删改查（仅限前端）
- AngularJS动态添加数据并删除的实例
- angularJS实现动态添加,删除div方法
相关推荐
-
angularJS实现动态添加,删除div方法
要实现的功能类似下图,动态添加或者删除div 点击 增加可添加一条div 点击删除可删除一条div HTML代码如下:(省略CSS样式代码了大笑) <div class="accordion-inner"> <div class="alert alert-info fade in" ng-repeat="permission in permissions">授权给: <select id="" c
-
AngularJS动态添加数据并删除的实例
如下所示: <!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF-8"> <title>TodoList</title> <style> body { padding: 0; margin: 0; } .todo { width: 300px; margin: 100px a
-
AngularJS实现表格的增删改查（仅限前端）
用AngularJS实现对表格的增删改查(仅限前端),具体代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现表格的增删改查</title> <meta http-equiv="keywords" content="keyword1,keyword2,keywo
-
angularJs 表格添加删除修改查询方法
如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="agl/angular.min.js"></script> <script> var app=angular.module("
-
AngularJS表格添加序号的方法
本文实例讲述了AngularJS表格添加序号的方法.分享给大家供大家参考,具体如下: 1.问题背景 AngularJS表格需要序号,可以利用$index来作为序号 2.实现实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之表格序号</title> <link rel="stylesheet" h
-
用SQL语句添加删除修改字段、一些表与字段的基本操作、数据库备份等
用SQL语句添加删除修改字段 1.增加字段 alter table docdsp add dspcode char(200) 2.删除字段 ALTER TABLE table_NAME DROP COLUMN column_NAME 3.修改字段类型 ALTER TABLE table_name ALTER COLUMN column_name new_data_type 4.sp_rename 改名 更改当前数据库中用户创建对象(如表.列或用户定义数据类型)的名称. 语法 sp_rename
-
vue element实现表格增加删除修改数据
本文实例为大家分享了vue element实现表格增加删除修改数据的具体代码,供大家参考,具体内容如下 这里用到是设置一个弹出框来实现此功能,还有一种方法是直接在原来的基础上面进行修改 效果如下: 表格的table: <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width=&q
-
Javascript动态创建表格及删除行列的方法
本文实例讲述了Javascript动态创建表格及删除行列的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
jsp中为表格添加水平滚动条的方法
首先,本项目中使用的是bootstrap框架,因此有些人会说,给表格设置自适应属性就可以了 这里要申明的是 bootsrtap自适应是针对当浏览器不占满整个屏幕,而是一半的时候才会出现横向的滚动条 而当我们将浏览器最大化的时候,如果列数增多了呢?会出现什么效果 答案就是会出现挤压的效果,横向并不会出现滚动条 查看网上的教程,很多人都说将什么父div设置100%,table添加scrool属性均不可 这里,解决的方法很简单,设置<th>标签的属性即可,让其不要自动换行 $(document).r
-
JQuery实现动态添加删除评论的方法
本文实例讲述了JQuery实现动态添加删除评论的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
-
vue实现本地存储添加删除修改功能
本文实例为大家分享了vue实现本地存储添加删除修改的具体代码,供大家参考,具体内容如下 实现功能: 输入的内容添加到正在进行列表中, 双击修改功能, 点击esc键,取消,还是之前的内容, 点击回车,修改成功, 修改框失焦时修改成功, 选中按钮时进入已完成列表,未选中时在正在进行中列表, 点击删除进行删除当行, 本地存储下次打开上次添加的还在 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&
-
jQuery添加删除DOM元素方法详解
本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML. 例如:document,getElementsByTagName("form");//使用DOM
-
详解vue添加删除元素的方法
相关版实例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实例:添加删除元素r</title> <style type="text/css"> .form-group{ margin:10px; } .form-group>label{ displa