AngularJs增删改查
来源：互联网 发布：中世纪2原版优化9百科 编辑：程序博客网 时间：2024/05/22 00:27
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>
<script>
var app = angular.module('myApp',['ngRoute']);
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when('/tian',{controller:"addUserCtrl",templateUrl:"tian.html"})
.when("/updatePwd/:name",{controller:"update",templateUrl:"updatePwd.html"})
.otherwise({redirectTo:"/tian"});
}]);
app.controller("myCtrl",function($scope,$location){
$scope.bx = [
{name:'张三',mm:121,age:18,sex:'男'},
{name:'李四',mm:123,age:25,sex:'女'},
{name:'王五',mm:151,age:20,sex:'男'}
];
//定义页面跳转方法
$scope.goToUrl = function(path){
$location.path(path);
};
//删除
$scope.shan = function(){
$scope.bx = [];
};
$scope.san = function(index){
$scope.bx.splice(index,1);
};
});
//定义添加用户控制器
app.controller("addUserCtrl",function($scope){
$scope.name = "";
$scope.mm = "";
$scope.age = "";
$scope.sex = "";
$scope.sub = function(){
var newUser = {
name:$scope.name,
mm:$scope.mm,
age:$scope.age,
sex:$scope.sex
}
//添加新用户.
$scope.bx.push(newUser);
}
});
//定义修改用户控制器
app.controller("update",function($scope,$routeParams){
$scope.name = $routeParams.name;
$scope.oldPwd = "";
$scope.pwd1 = "";
$scope.pwd2 = "";
$scope.updatePwd = function(){
for(index in $scope.bx){
if($scope.bx[index].name == $scope.name) {
$scope.bx[index].mm = $scope.pwd1;
}
}
}
});
</script>
</head>
<link rel="stylesheet" href="css/lx.css" />
<body ng-app="myApp" ng-controller="myCtrl">
<div id="box">
<div id="top">
<table class="sm">
<tr>
<td><input type="text" ng-model="names" placeholder="用户名查询"/></td>
<td>
<input type="text" placeholder="年龄范围查询" ng-model="cfw" />
</td>
<td><select ng-model="fsex">
<option>男</option>
<option>女</option>
</select></td>
<td><button ng-click="shan()">全部删除</button></td>
</tr>
</table>
</div>
<div id="z">
<table border="1" cellpadding="10">
<tr>
<td><input type="checkbox" ng-model="qx"/></td>
<td>id</td>
<td>用户名</td>
<td>密码</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
<td>删除</td>
</tr>
<tr ng-repeat="x in bx | filter:{name:names} | filter:{sex:fsex} | filter:{age:cfw} ">
<td><input type="checkbox" ng-checked="qx"/></td>
<td>{{$index+1}}</td>
<td>{{x.name}}</td>
<td>{{x.mm}}</td>
<td>{{x.age}}</td>
<td>{{x.sex}}</td>
<td><button ng-click="goToUrl('/updatePwd/'+x.name)">修改密码</button></td>
<td><button ng-click="san($index)">删除</button></td>
</tr>
</table>
</div>
<div id="x">
<!--添加用户-->
<center>
<button class="tj" ng-click="goToUrl('/tian')">添加用户</button>
</center>
<script type="text/ng-template" id="tian.html">
<form action="">
<table border="1" cellpadding="10" id="db">
<tr>
<td>用户名:<input type="text" ng-model="name"/></td>
</tr>
<tr>
<td>密 码:<input type="text" ng-model="mm"/></td>
</tr>
<tr>
<td>年 龄:<input type="text" ng-model="age"/></td>
</tr>
<tr>
<td>性 别:<input type="text" ng-model="sex"/></td>
</tr>
<tr>
<td><button id="ti" ng-click="sub()">提交</button></td>
</tr>
</table>
</form>
</script>
<!--修改密码-->
<script type="text/ng-template" id="updatePwd.html">
<form>
<table border="1" cellspacing="1" cellpadding="10">
<tr>
<th>用户名：</th>
<td><input ng-model="name" disabled="disabled" placeholder="请输入用户名" /></td>
</tr>
<tr>
<th>旧密码：</th>
<td><input ng-model="oldPwd" placeholder="请输入密码" /></td>
</tr><tr>
<th>新密码：</th>
<td><input ng-model="pwd1" placeholder="请输入年龄" /></td>
</tr><tr>
<th>确 认：</th>
<td><input ng-model="pwd2" placeholder="请输入性别" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="提交" ng-click="updatePwd()" /></td>
</tr>
</table>
</form>
</script>
<div ng-view></div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>
<script>
var app = angular.module('myApp',['ngRoute']);
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when('/tian',{controller:"addUserCtrl",templateUrl:"tian.html"})
.when("/updatePwd/:name",{controller:"update",templateUrl:"updatePwd.html"})
.otherwise({redirectTo:"/tian"});
}]);
app.controller("myCtrl",function($scope,$location){
$scope.bx = [
{name:'张三',mm:121,age:18,sex:'男'},
{name:'李四',mm:123,age:25,sex:'女'},
{name:'王五',mm:151,age:20,sex:'男'}
];
//定义页面跳转方法
$scope.goToUrl = function(path){
$location.path(path);
};
//删除
$scope.shan = function(){
$scope.bx = [];
};
$scope.san = function(index){
$scope.bx.splice(index,1);
};
});
//定义添加用户控制器
app.controller("addUserCtrl",function($scope){
$scope.name = "";
$scope.mm = "";
$scope.age = "";
$scope.sex = "";
$scope.sub = function(){
var newUser = {
name:$scope.name,
mm:$scope.mm,
age:$scope.age,
sex:$scope.sex
}
//添加新用户.
$scope.bx.push(newUser);
}
});
//定义修改用户控制器
app.controller("update",function($scope,$routeParams){
$scope.name = $routeParams.name;
$scope.oldPwd = "";
$scope.pwd1 = "";
$scope.pwd2 = "";
$scope.updatePwd = function(){
for(index in $scope.bx){
if($scope.bx[index].name == $scope.name) {
$scope.bx[index].mm = $scope.pwd1;
}
}
}
});
</script>
</head>
<link rel="stylesheet" href="css/lx.css" />
<body ng-app="myApp" ng-controller="myCtrl">
<div id="box">
<div id="top">
<table class="sm">
<tr>
<td><input type="text" ng-model="names" placeholder="用户名查询"/></td>
<td>
<input type="text" placeholder="年龄范围查询" ng-model="cfw" />
</td>
<td><select ng-model="fsex">
<option>男</option>
<option>女</option>
</select></td>
<td><button ng-click="shan()">全部删除</button></td>
</tr>
</table>
</div>
<div id="z">
<table border="1" cellpadding="10">
<tr>
<td><input type="checkbox" ng-model="qx"/></td>
<td>id</td>
<td>用户名</td>
<td>密码</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
<td>删除</td>
</tr>
<tr ng-repeat="x in bx | filter:{name:names} | filter:{sex:fsex} | filter:{age:cfw} ">
<td><input type="checkbox" ng-checked="qx"/></td>
<td>{{$index+1}}</td>
<td>{{x.name}}</td>
<td>{{x.mm}}</td>
<td>{{x.age}}</td>
<td>{{x.sex}}</td>
<td><button ng-click="goToUrl('/updatePwd/'+x.name)">修改密码</button></td>
<td><button ng-click="san($index)">删除</button></td>
</tr>
</table>
</div>
<div id="x">
<!--添加用户-->
<center>
<button class="tj" ng-click="goToUrl('/tian')">添加用户</button>
</center>
<script type="text/ng-template" id="tian.html">
<form action="">
<table border="1" cellpadding="10" id="db">
<tr>
<td>用户名:<input type="text" ng-model="name"/></td>
</tr>
<tr>
<td>密 码:<input type="text" ng-model="mm"/></td>
</tr>
<tr>
<td>年 龄:<input type="text" ng-model="age"/></td>
</tr>
<tr>
<td>性 别:<input type="text" ng-model="sex"/></td>
</tr>
<tr>
<td><button id="ti" ng-click="sub()">提交</button></td>
</tr>
</table>
</form>
</script>
<!--修改密码-->
<script type="text/ng-template" id="updatePwd.html">
<form>
<table border="1" cellspacing="1" cellpadding="10">
<tr>
<th>用户名：</th>
<td><input ng-model="name" disabled="disabled" placeholder="请输入用户名" /></td>
</tr>
<tr>
<th>旧密码：</th>
<td><input ng-model="oldPwd" placeholder="请输入密码" /></td>
</tr><tr>
<th>新密码：</th>
<td><input ng-model="pwd1" placeholder="请输入年龄" /></td>
</tr><tr>
<th>确 认：</th>
<td><input ng-model="pwd2" placeholder="请输入性别" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="提交" ng-click="updatePwd()" /></td>
</tr>
</table>
</form>
</script>
<div ng-view></div>
</div>
</div>
</body>
</html>
阅读全文
0 0
- AngularJs增删改查
- angularjs增删改查
- AngularJs增删改查
- angularjs实现增删改查
- Angularjs 增删改查1
- Angularjs增删改查，路由
- angularjs-增删改查+排序
- angularjs的增删改查
- angularjs的增删改查
- Angularjs增删改查例子
- angularjs表格的增删改查
- AngularJs增删改查_路由器
- AngularJS的增删改查+路由
- AngularJS增删查改（D）
- AngularJS页面的增删改查
- angularJS实现增删改查等
- angularJS/路由实现增删改查
- angularjs之增删改查2
- Java中 八种基本数据类型的大小，以及他们的封装类
- Redis中连接池使用的相关问题
- <学习笔记>排序模板
- mysql创建用户和修改密码
- Java中 Switch能否用string做参数？
- AngularJs增删改查
- UOJ 117 欧拉回路
- [组合 卡特兰数] 51Nod1556 计算
- 最小生成树Prim算法理解
- [CodeVs 4373] 窗口 ——单调队列
- 移动端 Web 页 input 控制软键盘
- OPNET14.5+Win8.1+VS2013
- java中equals()与==的区别
- org.elasticsearch.bootstrap.StartupException: java.lang.IllegalStateException: failed to obtain node
