购物车修改删除 全选反选批量删除查询排序
2017-12-16 17:01
477 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app=angular.module("myApp",[])
app.controller("myCtrl",function($scope){
$scope.products=[
{"id":"80","name":"iphone","price":5400,state:false},
{"id":"1200","name":"ipad mini","price":2200,state:false},
{"id":"500","name":"ipad air","price":2340,state:false},
{"id":"290","name":"ipad","price":1420,state:false},
{"id":"910","name":"imac","price":15400,state:false}
]
//删除
$scope.de=function(name){
if(window.confirm("确定要删除"+name+"吗？")){
for(index in $scope.products){
if(name==$scope.products[index].name){
$scope.products.splice(index,1);
}
}
}
}
//全选、全不选
$scope.selectAll = false;
$scope.selectAllFun = function() {
if($scope.selectAll) {
for(index in $scope.products) {
$scope.products[index].state = true;
}
} else {
for(index in $scope.products) {
$scope.products[index].state = false;
}
}
}
//反选
$scope.checkselAll = function() {
var flag = false;
for(index in $scope.products) {
if(!$scope.products[index].state) {
//满足条件
flag = true;
}
}
if(flag) {
$scope.selectAll = false;
} else {
$scope.selectAll = true;
}
}
//批量删除
$scope.delselect = function() {
var selArr = [];
for(index in $scope.products) {
if($scope.products[index].state) {
selArr.push($scope.products[index].name)
}
}
if(selArr.length <= 0) {
alert("请先选择");
} else {
if(window.confirm("确定要删除吗？")) {
for(index1 in selArr) {
for(index2 in $scope.products) {
if(selArr[index1] == $scope.products[index2].name) {
$scope.products.splice(index2,1);
}
}
}
} else {
}
}
}
//修改
$scope.up=function(name){
var pro=window.prompt("确定要修改吗？");
if(pro!=null){
// alert(pro);
for (index in $scope.products) {
if(name== $scope.products[index].name){
$scope.products[index].price=pro;
}
}
}
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" style="margin: 0px auto;">
<h1 style="margin: 0px auto;">购物车</h1>
产品名称：<input type="text" placeholder="产品名称" ng-model="search"/>
排序：<select ng-model="paixu">
<option value="">排序方式</option>
<option value="id">id正序</option>
<option value="-id">id逆序</option>
<option value="price">价格正序</option>
<option value="-price">价格逆序</option>
</select>
<input type="button" value="批量删除" ng-click="delselect()"/>
<table border="1px solid black" cellpadding="10px" cellspacing="0" width="500px" height="300px">
<tr>
<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></td>
<td>产品编号</td>
<td>产品名称</td>
<td>产品价格</td>
<td>操作</td>
</tr>
<tr ng-repeat="p in products | filter:{name:search} | orderBy:paixu" >
<td><input type="checkbox" ng-model="p.state" ng-click="checkselAll()"></td>
<td>{{p.id}}</td>
<td>{{p.name}}</td>
<td>{{p.price}}</td>
<td><input type="button" value="删除" ng-click="de(p.name)"><input type="button" value="修改" ng-click="up(p.name)"></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app=angular.module("myApp",[])
app.controller("myCtrl",function($scope){
$scope.products=[
{"id":"80","name":"iphone","price":5400,state:false},
{"id":"1200","name":"ipad mini","price":2200,state:false},
{"id":"500","name":"ipad air","price":2340,state:false},
{"id":"290","name":"ipad","price":1420,state:false},
{"id":"910","name":"imac","price":15400,state:false}
]
//删除
$scope.de=function(name){
if(window.confirm("确定要删除"+name+"吗？")){
for(index in $scope.products){
if(name==$scope.products[index].name){
$scope.products.splice(index,1);
}
}
}
}
//全选、全不选
$scope.selectAll = false;
$scope.selectAllFun = function() {
if($scope.selectAll) {
for(index in $scope.products) {
$scope.products[index].state = true;
}
} else {
for(index in $scope.products) {
$scope.products[index].state = false;
}
}
}
//反选
$scope.checkselAll = function() {
var flag = false;
for(index in $scope.products) {
if(!$scope.products[index].state) {
//满足条件
flag = true;
}
}
if(flag) {
$scope.selectAll = false;
} else {
$scope.selectAll = true;
}
}
//批量删除
$scope.delselect = function() {
var selArr = [];
for(index in $scope.products) {
if($scope.products[index].state) {
selArr.push($scope.products[index].name)
}
}
if(selArr.length <= 0) {
alert("请先选择");
} else {
if(window.confirm("确定要删除吗？")) {
for(index1 in selArr) {
for(index2 in $scope.products) {
if(selArr[index1] == $scope.products[index2].name) {
$scope.products.splice(index2,1);
}
}
}
} else {
}
}
}
//修改
$scope.up=function(name){
var pro=window.prompt("确定要修改吗？");
if(pro!=null){
// alert(pro);
for (index in $scope.products) {
if(name== $scope.products[index].name){
$scope.products[index].price=pro;
}
}
}
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" style="margin: 0px auto;">
<h1 style="margin: 0px auto;">购物车</h1>
产品名称：<input type="text" placeholder="产品名称" ng-model="search"/>
排序：<select ng-model="paixu">
<option value="">排序方式</option>
<option value="id">id正序</option>
<option value="-id">id逆序</option>
<option value="price">价格正序</option>
<option value="-price">价格逆序</option>
</select>
<input type="button" value="批量删除" ng-click="delselect()"/>
<table border="1px solid black" cellpadding="10px" cellspacing="0" width="500px" height="300px">
<tr>
<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></td>
<td>产品编号</td>
<td>产品名称</td>
<td>产品价格</td>
<td>操作</td>
</tr>
<tr ng-repeat="p in products | filter:{name:search} | orderBy:paixu" >
<td><input type="checkbox" ng-model="p.state" ng-click="checkselAll()"></td>
<td>{{p.id}}</td>
<td>{{p.name}}</td>
<td>{{p.price}}</td>
<td><input type="button" value="删除" ng-click="de(p.name)"><input type="button" value="修改" ng-click="up(p.name)"></td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJS购物车实现添加用户,修改用户,全选反选,批量删除
- 购物车——（批量删除，全选反选，修改值）
- jq全选反选批量删除
- AngularJS综合用户信息, 表单验证,过滤查询,全选反选,批量删除,修改,添加
- 购物车之 全选 反选 批量删除 包邮 总价
- JavaScript【GridView——CheckBox全选/反选 批量删除修改 不选时提示信息】
- AngularJs实现添加,批量删除,全选,反选等功能
- angular全选反选批量删除
- Angularjs 增删改查全选反选批量删除总价总数
- AngularJS表格数据全选反选批量删除,删除的数据添加到数组里
- android模拟数据实现全选反选批量删除
- 实现购物车结算功能：批量/全部删除，全选，单价/总价，数量增减，页面隐藏/显示
- 全选和反选及批量删除
- AngularJs多选框表格全选反选批量删除
- 添加全选反选批量删除
- 实现购物车结算功能：批量和全部删除，全选和反选，单价和总价，数量增减，页面隐藏和显示
- js实现全选、反选功能（批量删除）
- DeveXpress ASPxGridView获取要批量删除或者批量更改的Id（AspxGridView复选框的全选|反选功能
- yii框架全选反选批量删除
- RecyclerView单选框删除条目，全选删除，Recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算