js 查询 添加 删除 练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-2.1.0.js" type="text/javascript"></script>
<script src="angular.js" type="text/javascript"></script>
<script src="angular-route.js" type="text/javascript"></script>
<script type="text/javascript">
var app=angular.module("myapp",["ngRoute"]);
var user=[{"id":"1","name":"张三","pwd":"111","age":"20","sex":"男"},
{"id":"2","name":"李四","pwd":"222","age":"21","sex":"女"},
{"id":"3","name":"王五","pwd":"333","age":"22","sex":"男"}];
app.value("user",user);
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/up",{
controller:"myctrl",
templateUrl:"up.html"})
.when("/add",{
controller:"myctrl",
templateUrl:"add.html"
});
}]);
app.controller("myctrl",function($scope,user,$location){
$scope.user=user;
$scope.del=function(){
$scope.user.splice($scope.user);
};
$scope.goToUrl=function(path){
$location.path(path);
};
$scope.goTourl=function(path){
$location.path(path);
};
$scope.dd=function(){
var usernew={id:$scope.id,
name:$scope.name,
pwd:$scope.pwd,
age:$scope.age,
sex:$scope.sex};
$scope.user.push(usernew);
};
var ii=0;
$scope.upp=function($index){
$scope.newpwdd=$scope.user[$index].pwd;
$scope.newname=$scope.user[$index].name;
ii=$index;
};
$scope.gmm=function(){
$scope.user[ii].pwd=$scope.newpwd;
};
});
</script>
<style>
.header{
width: 700px;
height: 50px;
}
.name{
margin-top: 10px;
}
.age{
margin-top: 10px;
}
.sex{
margin-top: 10px;
}
.add{
margin-top: 20px;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<div class="header">
用户名:<input type="text" class="name" ng-model="search" />
年龄：<input type="text" class="age" ng-model="searchone" />
性别：<select class="sex" ng-model="searchtwo">
<option></option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="del()">全部删除</button>
</div>
<table border="1" cellpadding="20" cellspacing="0">
<tr>
<th>id</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="u in user | filter:{'name':search} | filter:{'age':searchone} | filter:{'sex':searchtwo}">
<td>{{u.id}}</td>
<td>{{u.name}}</td>
<td>{{u.pwd}}</td>
<td>{{u.age}}</td>
<td>{{u.sex}}</td>
<td>
<button ng-click="goToUrl('/up');upp($index)" >修改密码</button>
</td>
</tr>
</table>
<button class="add" ng-click="goTourl('/add')">添加用户</button>
<script type="text/ng-template" id="up.html">
<form action="#">
<table>
<tr>
<td>用户名: </td>
<td><input type="text" ng-model="newname" /></td>
</tr>
<tr>
<td>旧密码: </td>
<td><input type="text" ng-model="newpwdd" /></td>
</tr>
<tr>
<td>新密码:</td>
<td><input type="text" ng-model="newpwd" /></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" ng-click="gmm()" value="提交" />
</td>
</tr>
</table>
</form>
</script>
<script type="text/ng-template" id="add.html">
<form action="#">
<table>
<tr>
<td>id:</td>
<td><input type="text" ng-model="id" /></td>
</tr>
<tr>
<td>用户名:</td>
<td> <input type="text" ng-model="name" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" ng-model="pwd" /></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" ng-model="age" /></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="text" ng-model="sex" /><br /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" ng-click="dd()" value="提交" /></td>
</tr>
</table>
</form>
</script>
<div ng-view> </div>
</center>
</body>
</html>
js 查询 添加 删除 练习的更多相关文章
- JS动态添加删除html
本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...
- 使用Bootstrap + Vue.js实现 添加删除数据
界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版 ...
- JS数组添加删除
栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.原文: https://www.w3cplus.com/j ...
- mysql 查询 添加 删除 语句
1.说明:创建数据库CREATE DATABASE database-name2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备份数据的 d ...
- vue.js实现添加删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JAVA连接MYSQL,查询 ,添加,删除,语句
package com; import Java.sql.*;/** *//** * @author Administrator */public class ggg { private ...
- JS原生添加删除class的方法
之前习惯了使用jquery的addClass的方法,然后就去找了下别人写的代码. [javascript] view plain copy function hasClass(obj,cls) { r ...
- JS添加删除一组文本框并对输入信息加以验证
在做项目中遇到这样一个问题,就是我们需要添加几组数据到数据库,但是具体几组数据不确定,有客户来填写,比如我们需要添加打折策略,可能个策略有很多组方案,比如“满100打5折,满200打4折,满500打3 ...
- JS：操作样式表2 :用JS实现添加和删除一个类名的功能（addClass()和removeClass()）
var box = document.getElementById("box"); box.id = "pox"; 将id = “box”,改为id = “po ...
随机推荐
- 201521123077 《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容 总的来说主要有三种类 InputStream/OutputStream(字节流操作类的父类) 提供对字节 ...
- Java课程设计-随机密码生成器
1.团队课程设计博客链接 团队课程设计博客地址 2.个人负责模板 随即密码生成器算法 3.自己的代码提交记录截图 4.自己负责模块或任务详细说明 负责随机密码算法设计实现 通过不同种类选择下生成密码, ...
- JAVA课程设计+五子棋（团队博客）
JAVA课程设计 利用所学习的JAVA知识设计一个五子棋小游戏 1.团队名称.团队成员介绍(菜鸟三人组) 杨泽斌[组长]:201521123049 网络1512 叶文柠[组员]:20152112305 ...
- 201521123045 《JAVA程序设计》第1周学习总结
1. 本周学习总结 学习了入门的java知识,知道了jdk.eclipse等基础软件,了解了如何编译最基础的java程序.知道了java的基本原理以及java的几种数据类型.掌握使用简单编译器编写ja ...
- Day-14： 常用的内建模块
collections包含对tuple.list.dict等派生出新功能 namedtuple用来为tuple类型派生出一个新名字的tuple类,并提供用属性引出的功能. >>> f ...
- JDBC第二篇--【PreparedStatment、批处理、处理二进制、自动主键、调用存储过程、函数】
这是我JDBC的第一篇 http://blog.csdn.net/hon_3y/article/details/53535798 1.PreparedStatement对象 PreparedState ...
- 举例让抽象问题具体化：包含min函数的栈
定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数.在该栈中,调用min.push及pop的时间复杂度都是O(1). import java.util.Stack; public c ...
- CKEditor与dotnetcore实现图片上传
CKEditor的使用 1.引入js库 <script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js&quo ...
- MUI开发记录
最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~ HUuilder使用安卓模拟器 安卓模拟器有很多,我这里以夜神模 ...
- C++11获取线程的返回值
C++11 std::future and std::promise 在许多时候,我们会有这样的需求--即我们想要得到线程返回的值. 但是在C++11 多线程中我们注意到,std::thread对象会 ...