angular添加,查找与全部删除
<!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>
angular添加,查找与全部删除的更多相关文章
- MVC5 网站开发之八 栏目功能 添加、修改和删除
本次实现栏目的浏览.添加.修改和删除. 栏目一共有三种类型. 常规栏目-可以添加子栏目,也可以添加内容模型.当不选择内容模型时,不能添加内容. 单页栏目-栏目只有一个页面,可以设置视图. 链接栏目-栏 ...
- datagrid 添加、修改、删除（转载）
原链接:JQueryEasyUI学习笔记(十)datagrid 添加.修改.删除 基于datagrid框架的删除.添加与修改: 主要是批量删除,双击表单修改.选中行修改,增加行修改,再有就是扩展edi ...
- C# 添加，修改，删除Xml节点 摘录
C# 添加,修改,删除Xml节点 //添加xml节点 private void AddXml(string image, string title) { XmlDocume ...
- js/java 获取、添加、修改、删除cookie（最全）
一.cookie介绍 1.cookie的本来面目 HTTP协议本身是无状态的.什么是无状态呢,即服务器无法判断用户身份.Cookie实际上是一小段的文本信息(key-value格式).客户端向服务 ...
- ASP.NET MVC对WebAPI接口操作(添加，更新和删除)
昨天<怎样操作WebAPI接口(显示数据)>http://www.cnblogs.com/insus/p/5670401.html 既有使用jQuery,也有使作HttpClient来从数 ...
- javascript里面的数组，json对象，动态添加，修改，删除示例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- VS问题：该依赖项是由项目系统添加的，不能删除。
该依赖项是由项目系统添加的,不能删除. 原因:是该项目添加对依赖项的引用时,不是直接引用的dll,而是通过“添加引用->项目”的方式引用的项目. 解决:删除“引用”目录下该依赖项的引用,然后通过 ...
- Jquery EasyUI的添加，修改，删除，查询等基本操作介绍
http://www.jb51.net/article/42016.htm 初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套 ...
- 解决：错误 14274: 无法添加、更新或删除 SQL 服务器上的作业的问题一例
今天在修改 SQL服务器上 以前的作业任务,打算把作业的执行时间修改成新的时间,结果修改好点确定, 结果出现了以下错误! --------------------------- Microsoft ...
随机推荐
- 浏览器console的用法
Leo_wlCnBlogs 自由.创新.研究.探索 Linux/Windows Mono/DotNet [ Open Source .NET Development/ 使用开源工具进行DotNet软件 ...
- 游戏平台代表--PS4【推荐】
目前市上专业的游戏主机三足鼎立,分别是任天堂的wii,微软的xbox,已经索尼的PlayStation系列,这其中的老大当然是索尼PS4啦,因为即使美国佬也是优选ps4而不是自家的Xbox.小编历经千 ...
- 自制IPsec_vpn综合实验
实验需求 R1.R2间tunnel建立私网: Vpn网关间配置ipsec实现数据加密: 使用tunnel模式下的ESP包头封装: 使用3des加密算法,md5摘要算法: 设置NAT旁路绕行流量: 利用 ...
- 团队作业4——第一次项目冲刺（ALpha版本）第三天
一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.界面 完成了前端的HTML页面设计 2.功能 完成了后端数据处理的全部基本功能: 数据结构设计及数据交互操作 博客页面数据 ...
- 201521123069 《Java程序设计》 第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 (1)泛型允许指定集合中元素的类型,在编译时就可以进行类型检查,避免运 ...
- 201521123057《Java程序设计》第14周学习总结
0. 本周课程设计发布 Java课程设计 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 数据库基本操作(目前为止主要介绍了表的基本操作) 创建表 CREATE ...
- openfire ：openfire 不同类型插件的开发示例
新建一个自己的Javaproject工程,添加的jar包如下: 将jasper-compiler.jar.jasper-runtime.jar.servlet.jar添加到新建的工程中.如果没有jar ...
- Java内部类的总结
内部类是指在一个外部类的内部再定义一个类.类名不需要和文件夹相同. 内部类分为: 成员内部类.局部内部类.静态嵌套类.匿名内部类 . 1.成员内部类 成员内部类是最普通的内部类,它的定义为位于另一个类 ...
- 泛型在Web中的作用
当我们写网页的时候,常常会有多个DAO,我们要写每次都要写好几个DAO,这样会有点麻烦. 那么我们想要的效果是什么呢??只写一个抽象DAO,别的DAO只要继承该抽象DAO,就有对应的方法了. 要实现这 ...
- Java图的邻接矩阵实现
/** * * 图的邻接矩阵实现 * @author John * * @param <T> */ class AMWGraph<T> { private ArrayList& ...