AngularJS购物车实现添加用户,修改用户,全选反选,批量删除
2017-11-22 18:29
766 查看
<!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/jquery-2.1.0.js" ></script>
<style>
table tr:nth-child(even){
background-color: #EEEEEE;
}
table tr:nth-child(odd){
background-color: white;
}
table tr:hover{
background-color:deepskyblue;
}
</style>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.users = [{
name:"张三",
age:45,
spell:"zhang san",
job:"总经理",
state:false
},{
name:"李四",
age:43,
spell:"li si",
job:"设计师",
state:false
},{
name:"王五",
age:40,
spell:"wang wu",
job:"工程师",
state:false
},{
name:"赵六",
age:33,
spell:"zhao liu",
job:"工程师",
state:false
},{
name:"周七",
age:32,
spell:"zhou qi",
job:"人事经理",
state:false
}];
//删除用户的功能
$scope.del = function($name){
for(index in $scope.users){
if($name==$scope.users[index].name){
if(confirm("确定要删除吗?")){
$scope.users.splice(index,1);
}else{
}
}
}
};
//点击添加用户就弹出div
$scope.isShow = false;
$scope.insert = function(){
if($scope.isShow){
$scope.isShow = false;
}else{
$scope.showUpd = false;
$scope.isShow = true;
}
};
//年龄排序
$scope.xin;
$scope.pai = function(){
if($scope.xin=="age"){
$scope.orderFlag = "";
$scope.orderLine = "age";
}else if($scope.xin=="-age"){
$scope.orderFlag = "-";
$scope.orderLine = "age";
}
};
//点击将新用户添加到数据表中
//创建一个数组,将提示信息放入数组
$scope.tishiNew = false;
$scope.checkSub = [];
$scope.saveNew = function(){
//点击事件后将数组清空
$scope.checkSub = [];
//判断如果不符合条件,就将字符串添加到数组里面
if($scope.newName==""||$scope.newName==null){
$scope.checkSub.push("姓名不能为空");
}else if($scope.newAge==""||$scope.newAge==null){
$scope.checkSub.push("年龄不能为空");
}else if($scope.newSpell==""||$scope.newSpell==null){
$scope.checkSub.push("拼音不能为空");
}else if($scope.newJob==""||$scope.newJob==null){
$scope.checkSub.push("职位不能为空");
}else if(isNaN($scope.newAge)){
alert("年龄格式不正确");
return false;
}
//判断数组的长度是否大于0,如果数组里面有东西,就让提示错误信息的模块显示
if($scope.checkSub.length>0){
$scope.tishiNew = true;
}else{//否则就添加信息
$scope.tishiNew = false;
$scope.users.age=$scope.newAge;
userList = {
name:$scope.newName,
age:parseInt($scope.newAge),//将输入的转为整形数据
spell:$scope.newSpell,
job:$scope.newJob
};
$scope.users.push(userList);
}
/*$scope.users.name = $scope.newName;
$scope.users.age = $scope.newAge;
$scope.users.spell = $scope.newSpell;
$scope.users.job = $scope.newJob;
$scope.users.push({name:$scope.newName,age:$scope.newAge,spell:$scope.newSpell,job:$scope.newJob});*/
};
//修改按钮的操作
$scope.x = "";
$scope.showUpd = false;
$scope.upd =
4000
function(u){
$scope.isShow=false;
$scope.showUpd = true;
$scope.updName = u.name;
$scope.updAge = u.age;
$scope.updSpell = u.spell;
$scope.updJob = u.job;
$scope.x = u.age;
}
//点击保存将信息修改
$scope.tishiUpd = false;
$scope.updCheck = [];
$scope.saveUpd = function(){
//点击事件后将数组清空
$scope.updCheck = [];
//判断如果不符合条件,就将字符串添加到数组里面
if($scope.updName==""||$scope.updName==null){
$scope.updCheck.push("新姓名不能为空");
}else if($scope.oldAge==""||$scope.oldAge==null){
$scope.updCheck.push("旧年龄不能为空");
}else if($scope.updAge==""||$scope.updAge==null){
$scope.updCheck.push("新年龄不能为空");
}else if($scope.updSpell==""||$scope.updSpell==null){
$scope.updCheck.push("新拼音不能为空");
}else if($scope.updJob==""||$scope.updJob==null){
$scope.updCheck.push("新职位不能为空");
}else if(isNaN($scope.updAge)){
alert("年龄格式不正确");
return false;
}
//显示错误信息
if($scope.updCheck.length>0){
$scope.tishiUpd = true;
}else{
$scope.tishiUpd = false;
}
//判断旧年龄是否跟本来的相等
$scope.aaa=false;
// alert(parseInt($scope.oldAge)+"-----"+$scope.x);
if(parseInt($scope.oldAge)!=$scope.x){
alert("旧年龄不正确");
return false;
}
for(index in $scope.users){
// alert(parseInt($scope.oldAge)+"----"+$scope.users[index].age);
//名字为固定的,判断名字是否相等
if($scope.updName==$scope.users[index].name){
$scope.users[index].age = $scope.updAge;
$scope.users[index].spell = $scope.updSpell;
$scope.users[index].job = $scope.updJob;
}
};
}
//查询的功能
$scope.query = function(){
var falg = true;
if($scope.textName==""||$scope.textName==null||$scope.textName.length<=0){
alert("请输入姓名");
return false;
}
for(index in $scope.users){
if($scope.users[index].name==$scope.textName){
flag = true;
break;
}else{
flag = false;
}
}
if(flag){
alert("查到了");
}else{
alert("没查到");
}
};
//实现全选与全不选的功能
$scope.fath = false;
$scope.selectAll = function(){
if($scope.fath){
for(index in $scope.users){
$scope.users[index].state = true;
}
}else{
for(index in $scope.users){
$scope.users[index].state = false;
}
}
};
/*
* 反选功能:
* 反选,如果子按钮全选中,父按钮就自动选中,
* 如果子按钮有一个不选中,父按钮就自动取消选中状态
*/
$scope.selectCheck = function(){
var flag = false;
//遍历数组
for(index in $scope.users){//如果按钮有一个未选中
if(!$scope.users[index].state){
flag = true;//flag就是true
}
}
if(flag){
$scope.fath = false;
}else{
$scope.fath = true;
}
};
/**
* 批量删除的方法
*/
$scope.delAll = function(){
var isSelect = [];//定义一个数组
for(index in $scope.users){//遍历一下商品
if($scope.users[index].state){//如果是选中状态
isSelect.push($scope.users[index]);//就将他放入刚定义的数组里面
}
}
//判断一下数组的长度
if(isSelect.length<=0){
alert("没有选中任何用户");
}else{
for(index in isSelect){
var names = isSelect[index].name;
for(index2 in $scope.users){
if(names==$scope.users[index2].name){
$scope.users.splice(index2,1);
}
}
}
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
姓名查询条件<input type="text" ng-model="textName" />
<select ng-change="pai()" ng-model="xin" style="margin-left: 100px;">
<option value="">--请选择--</option>
<option value="age">按年龄正叙</option>
<option value="-age">按年龄倒叙</option>
</select><br />
<button ng-click="delAll()" style="float: right; margin-right: 400px;cursor: pointer;">批量删除</button><br /><br />
用户列表<br />
<table style="width: 600px;" border="1px solid #000" cellpadding="5" cellspacing="0">
<thead>
<tr style="background: gray;">
<th><input type="checkbox" ng-model="fath" ng-click="selectAll()" /></th>
<th>姓名</th>
<th>年龄</th>
<th>拼音</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in users | orderBy:(orderFlag+orderLine)">
<!--<span ng-model="as" ng-show="aaa">{{u.age}}</span>-->
<td align="center"><input ng-model="u.state" type="checkbox" ng-model="child" ng-click="selectCheck()" /></td>
<td>{{u.name}}</td>
<td ng-model="qw">{{u.age}}</td>
<td>{{u.spell}}</td>
<td>{{u.job}}</td>
<td><button style="cursor: pointer;" ng-click="del(u.name)">删除</button>
<button style="cursor: pointer;" ng-click="upd(u)">修改</button>
</td>
</tr>
</tbody>
</table><br /><br />
<button ng-click="query()">查询</button>
<button style="margin-left: 20px;" ng-click="insert()">添加用户</button><br /><br />
<div ng-show="isShow" style="border: 1px solid #000; width: 400px; height: 270px;">
<center>
添加用户信息<br /><br />
姓名:<input type="text" ng-model="newName" /><br /><br />
年龄:<input type="text" ng-model="newAge" /><br /><br />
拼音:<input type="text" ng-model="newSpell" /><br /><br />
职位:<input type="text" ng-model="newJob" /><br /><br />
<button ng-click="saveNew()">保存</button>
</center>
</div>
<div ng-show="tishiNew" style="border: 1px solid #000; width: 300px; height: 150px;">
<ul>
<li ng-repeat="c in checkSub">{{c}}</li>
</ul>
</div>
<div ng-show="showUpd" style="border: 1px solid #000; width: 400px; height: 270px;">
修改用户信息<br /><br />
新姓名:<input disabled="disabled" type="text" ng-model="updName" /><br />
旧密码:<input type="text" ng-model="oldAge" /><br /><br />
新密码:<input type="text" ng-model="updAge" /><br /><br />
新拼音:<input type="text" ng-model="updSpell" /><br /><br />
新职位:<input type="text" ng-model="updJob" /><br /><br />
<button ng-click="saveUpd()">保存</button>
</div><div ng-show="tishiUpd" style="border: 1px solid #000; width: 300px; height: 150px;">
<ul>
<li ng-repeat="p in updCheck">{{p}}</li>
</ul>
</div>
</center>
</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/jquery-2.1.0.js" ></script>
<style>
table tr:nth-child(even){
background-color: #EEEEEE;
}
table tr:nth-child(odd){
background-color: white;
}
table tr:hover{
background-color:deepskyblue;
}
</style>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.users = [{
name:"张三",
age:45,
spell:"zhang san",
job:"总经理",
state:false
},{
name:"李四",
age:43,
spell:"li si",
job:"设计师",
state:false
},{
name:"王五",
age:40,
spell:"wang wu",
job:"工程师",
state:false
},{
name:"赵六",
age:33,
spell:"zhao liu",
job:"工程师",
state:false
},{
name:"周七",
age:32,
spell:"zhou qi",
job:"人事经理",
state:false
}];
//删除用户的功能
$scope.del = function($name){
for(index in $scope.users){
if($name==$scope.users[index].name){
if(confirm("确定要删除吗?")){
$scope.users.splice(index,1);
}else{
}
}
}
};
//点击添加用户就弹出div
$scope.isShow = false;
$scope.insert = function(){
if($scope.isShow){
$scope.isShow = false;
}else{
$scope.showUpd = false;
$scope.isShow = true;
}
};
//年龄排序
$scope.xin;
$scope.pai = function(){
if($scope.xin=="age"){
$scope.orderFlag = "";
$scope.orderLine = "age";
}else if($scope.xin=="-age"){
$scope.orderFlag = "-";
$scope.orderLine = "age";
}
};
//点击将新用户添加到数据表中
//创建一个数组,将提示信息放入数组
$scope.tishiNew = false;
$scope.checkSub = [];
$scope.saveNew = function(){
//点击事件后将数组清空
$scope.checkSub = [];
//判断如果不符合条件,就将字符串添加到数组里面
if($scope.newName==""||$scope.newName==null){
$scope.checkSub.push("姓名不能为空");
}else if($scope.newAge==""||$scope.newAge==null){
$scope.checkSub.push("年龄不能为空");
}else if($scope.newSpell==""||$scope.newSpell==null){
$scope.checkSub.push("拼音不能为空");
}else if($scope.newJob==""||$scope.newJob==null){
$scope.checkSub.push("职位不能为空");
}else if(isNaN($scope.newAge)){
alert("年龄格式不正确");
return false;
}
//判断数组的长度是否大于0,如果数组里面有东西,就让提示错误信息的模块显示
if($scope.checkSub.length>0){
$scope.tishiNew = true;
}else{//否则就添加信息
$scope.tishiNew = false;
$scope.users.age=$scope.newAge;
userList = {
name:$scope.newName,
age:parseInt($scope.newAge),//将输入的转为整形数据
spell:$scope.newSpell,
job:$scope.newJob
};
$scope.users.push(userList);
}
/*$scope.users.name = $scope.newName;
$scope.users.age = $scope.newAge;
$scope.users.spell = $scope.newSpell;
$scope.users.job = $scope.newJob;
$scope.users.push({name:$scope.newName,age:$scope.newAge,spell:$scope.newSpell,job:$scope.newJob});*/
};
//修改按钮的操作
$scope.x = "";
$scope.showUpd = false;
$scope.upd =
4000
function(u){
$scope.isShow=false;
$scope.showUpd = true;
$scope.updName = u.name;
$scope.updAge = u.age;
$scope.updSpell = u.spell;
$scope.updJob = u.job;
$scope.x = u.age;
}
//点击保存将信息修改
$scope.tishiUpd = false;
$scope.updCheck = [];
$scope.saveUpd = function(){
//点击事件后将数组清空
$scope.updCheck = [];
//判断如果不符合条件,就将字符串添加到数组里面
if($scope.updName==""||$scope.updName==null){
$scope.updCheck.push("新姓名不能为空");
}else if($scope.oldAge==""||$scope.oldAge==null){
$scope.updCheck.push("旧年龄不能为空");
}else if($scope.updAge==""||$scope.updAge==null){
$scope.updCheck.push("新年龄不能为空");
}else if($scope.updSpell==""||$scope.updSpell==null){
$scope.updCheck.push("新拼音不能为空");
}else if($scope.updJob==""||$scope.updJob==null){
$scope.updCheck.push("新职位不能为空");
}else if(isNaN($scope.updAge)){
alert("年龄格式不正确");
return false;
}
//显示错误信息
if($scope.updCheck.length>0){
$scope.tishiUpd = true;
}else{
$scope.tishiUpd = false;
}
//判断旧年龄是否跟本来的相等
$scope.aaa=false;
// alert(parseInt($scope.oldAge)+"-----"+$scope.x);
if(parseInt($scope.oldAge)!=$scope.x){
alert("旧年龄不正确");
return false;
}
for(index in $scope.users){
// alert(parseInt($scope.oldAge)+"----"+$scope.users[index].age);
//名字为固定的,判断名字是否相等
if($scope.updName==$scope.users[index].name){
$scope.users[index].age = $scope.updAge;
$scope.users[index].spell = $scope.updSpell;
$scope.users[index].job = $scope.updJob;
}
};
}
//查询的功能
$scope.query = function(){
var falg = true;
if($scope.textName==""||$scope.textName==null||$scope.textName.length<=0){
alert("请输入姓名");
return false;
}
for(index in $scope.users){
if($scope.users[index].name==$scope.textName){
flag = true;
break;
}else{
flag = false;
}
}
if(flag){
alert("查到了");
}else{
alert("没查到");
}
};
//实现全选与全不选的功能
$scope.fath = false;
$scope.selectAll = function(){
if($scope.fath){
for(index in $scope.users){
$scope.users[index].state = true;
}
}else{
for(index in $scope.users){
$scope.users[index].state = false;
}
}
};
/*
* 反选功能:
* 反选,如果子按钮全选中,父按钮就自动选中,
* 如果子按钮有一个不选中,父按钮就自动取消选中状态
*/
$scope.selectCheck = function(){
var flag = false;
//遍历数组
for(index in $scope.users){//如果按钮有一个未选中
if(!$scope.users[index].state){
flag = true;//flag就是true
}
}
if(flag){
$scope.fath = false;
}else{
$scope.fath = true;
}
};
/**
* 批量删除的方法
*/
$scope.delAll = function(){
var isSelect = [];//定义一个数组
for(index in $scope.users){//遍历一下商品
if($scope.users[index].state){//如果是选中状态
isSelect.push($scope.users[index]);//就将他放入刚定义的数组里面
}
}
//判断一下数组的长度
if(isSelect.length<=0){
alert("没有选中任何用户");
}else{
for(index in isSelect){
var names = isSelect[index].name;
for(index2 in $scope.users){
if(names==$scope.users[index2].name){
$scope.users.splice(index2,1);
}
}
}
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
姓名查询条件<input type="text" ng-model="textName" />
<select ng-change="pai()" ng-model="xin" style="margin-left: 100px;">
<option value="">--请选择--</option>
<option value="age">按年龄正叙</option>
<option value="-age">按年龄倒叙</option>
</select><br />
<button ng-click="delAll()" style="float: right; margin-right: 400px;cursor: pointer;">批量删除</button><br /><br />
用户列表<br />
<table style="width: 600px;" border="1px solid #000" cellpadding="5" cellspacing="0">
<thead>
<tr style="background: gray;">
<th><input type="checkbox" ng-model="fath" ng-click="selectAll()" /></th>
<th>姓名</th>
<th>年龄</th>
<th>拼音</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in users | orderBy:(orderFlag+orderLine)">
<!--<span ng-model="as" ng-show="aaa">{{u.age}}</span>-->
<td align="center"><input ng-model="u.state" type="checkbox" ng-model="child" ng-click="selectCheck()" /></td>
<td>{{u.name}}</td>
<td ng-model="qw">{{u.age}}</td>
<td>{{u.spell}}</td>
<td>{{u.job}}</td>
<td><button style="cursor: pointer;" ng-click="del(u.name)">删除</button>
<button style="cursor: pointer;" ng-click="upd(u)">修改</button>
</td>
</tr>
</tbody>
</table><br /><br />
<button ng-click="query()">查询</button>
<button style="margin-left: 20px;" ng-click="insert()">添加用户</button><br /><br />
<div ng-show="isShow" style="border: 1px solid #000; width: 400px; height: 270px;">
<center>
添加用户信息<br /><br />
姓名:<input type="text" ng-model="newName" /><br /><br />
年龄:<input type="text" ng-model="newAge" /><br /><br />
拼音:<input type="text" ng-model="newSpell" /><br /><br />
职位:<input type="text" ng-model="newJob" /><br /><br />
<button ng-click="saveNew()">保存</button>
</center>
</div>
<div ng-show="tishiNew" style="border: 1px solid #000; width: 300px; height: 150px;">
<ul>
<li ng-repeat="c in checkSub">{{c}}</li>
</ul>
</div>
<div ng-show="showUpd" style="border: 1px solid #000; width: 400px; height: 270px;">
修改用户信息<br /><br />
新姓名:<input disabled="disabled" type="text" ng-model="updName" /><br />
旧密码:<input type="text" ng-model="oldAge" /><br /><br />
新密码:<input type="text" ng-model="updAge" /><br /><br />
新拼音:<input type="text" ng-model="updSpell" /><br /><br />
新职位:<input type="text" ng-model="updJob" /><br /><br />
<button ng-click="saveUpd()">保存</button>
</div><div ng-show="tishiUpd" style="border: 1px solid #000; width: 300px; height: 150px;">
<ul>
<li ng-repeat="p in updCheck">{{p}}</li>
</ul>
</div>
</center>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJS综合用户信息, 表单验证,过滤查询,全选反选,批量删除,修改,添加
- AngularJs实现添加,批量删除,全选,反选等功能
- AngularJs实现添加,批量删除,全选,反选等功能
- Angularjs实现购物车功能(按钮增减数量、添加、全选、删除、批量删除、结算)
- （angularjs） 数据的增删改查（添加用户，查询年龄，批量删除，全部删除，修改密码） 类似题
- 实现购物车结算功能：批量/全部删除，全选，单价/总价，数量增减，页面隐藏/显示
- 3.CRM实现用户的添加，修改，删除
- AngularJS表格数据全选反选批量删除,删除的数据添加到数组里
- AngularJs(全选.全不选.批量删除.添加)
- 购物车修改删除 全选反选批量删除查询排序
- php实现openfire用户同步添加,删除,修改
- 实现购物车结算功能：批量和全部删除，全选和反选，单价和总价，数量增减，页面隐藏和显示
- AngularJS 用户名查询、年龄查询、性别查询、全部删除、批量删除、添加用户、修改密码
- 以用户登录、注册、添加删除修改为例，解析jdbcTemplate使用方式以及spring注解实现CRUD
- 实现购物车结算功能：批量/全部删除，全选，单价/总价，数量增减，页面隐藏/显示
- Angularjs全选 反选 批量删除 修改 排序
- 用户信息列表 查询+年龄，性别搜索 +全部删除，批量删除+添加用户+修改密码
- 初学Html5+CSS之表格添加用户+删除用户+修改数据+删除全部+批量删除+查询数据+内容判断
- 使用angularjs实现查询、增加验证、修改、删除、以及批量删除等
- jQuery实现添加,批量删除,全选