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 ...
随机推荐
- jquery 函数大全
jquery函数大全转载 Attribute:$(”p”).addClass(css中定义的样式类型); 给某个元素添加样式$(”img”).attr({src:”test.jpg”,alt:”te ...
- 设计模式-单体模式(C++)
设计模式-单体模式 单体模式在使用非常方便,适合于单一的对象,例如全局对象的抽象使用. 需要注意的是单体模式不可继承 // 实现 Singleton.h #ifndef __SINGLETON_H__ ...
- 201521123084 《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. (1)Java中把不同类型的输入.输出抽象为流(Stream),而其中输入.输出的数据则称为数据流(Data ...
- Java学习7——一些注意的地方
(学习运算符.if和switch分支.for与while与do...while循环.break和continue.递归,内容和C++没差,挑了几个注意点) 运算符 逻辑与(&)和短路与(&am ...
- 201521123026 《Java程序设计》第4周学习总结
1. 本章学习总结 尝试使用思维导图总结有关继承的知识点 使用常规方法总结其他上课内容 1.类的重写:在子类中重写的方法需要和父类被重写的方法具有相同的方法名.参数列表以及返回值类型.当子类重写父类的 ...
- 201521123101 《Java程序设计》第2周学习总结
1. 本周学习总结 使用码云保存管理自己的代码: 学习String和Array: 继续对JAVA的探索,希望以后能在编程上更顺畅一些 2. 书面作业 1.使用Eclipse关联jdk源代码(截图),并 ...
- locale命令设置语言环境
locale命令设置语言环境 在Linux中通过locale来设置程序运行的不同语言环境,locale由 ANSI C提供支持.locale的命名规则为_.,如zh_CN.GBK,zh代表中文, CN ...
- 201521123010 《Java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 常用异常: ①题目5-1 1.1 截图你的提交结果(出现学号) A: 1.2 ...
- 201521123112《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 线程终止可以使用boolean标志使线程中的run()方法退出. 线程让步使用Thead.yield(). 等待其 ...
- 201521123009《Java程序设计》第14周学习总结
1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) - ...