當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Shoping~添加+修改+删除+批量删除

發(fā)布時間：2024/1/1 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 Shoping~添加+修改+删除+批量删除小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>隔行換色+刪除+批量刪除+排序+模糊查詢+修改+添加</title>
<script type="text/javascript" src="../angular/angular.js"></script>
<style type="text/css">
button:hover{
background-color:#FF3B30 ;
}
tbody tr:nth-child(odd){
background-color: orange;
}
tbody tr:nth-child(even){
background-color: aqua;
}
ul li{
list-style: none;
}
</style>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
/*聲明數(shù)據(jù)對象，初始化商品信息，數(shù)據(jù)自擬且不低于四條*/
$scope.goods = [{
"id": 80,
"name": "iPhone",
"price": 5400,
state: false
},
{
"id": 290,
"name": "iPad",
"price": 1420,
state: false
},
{
"id": 500,
"name": "iPad air",
"price": 2340,
state: false
},
{
"id": 910,
"name": "imac",
"price": 15400,
state: false
},
{
"id": 1200,
"name": "iPad mini",
"price": 2200,
state: false
}

];
//按年齡進行過濾排序
$scope.search = "";
//下拉菜單刪選商品價格、
$scope.goodPrice = "--請選擇--";
$scope.isShow = function(price) {
if($scope.goodPrice == "--請選擇--") {
return true;
} else {
var arr = $scope.goodPrice.split("-");
var priceMin = arr[0];
var priceMax = arr[1];
if(price < priceMin || price > priceMax) {
return false;
} else {
return true;
}
}
}

//全選反選
$scope.selectAll = false;
$scope.selectAllFun = function() {
if($scope.selectAll) {
for(index in $scope.goods) {
$scope.goods[index].state = true;
}
} else {
for(index in $scope.goods) {
$scope.goods[index].state = false;
}
}
}

//全不選
$scope.checkSelectAll = function() {
var a = 0;
for(index in $scope.goods) {
if(!$scope.goods[index].state) {
$scope.selectAll = false;
} else {
a++;
}
if(a == $scope.goods.length) {
$scope.selectAll = true;
} else {
$scope.selectAll = false;
}
}
}

//批量刪除
$scope.deleteAll = function() {
//定義一個空數(shù)組
var arr = [];
for(index in $scope.goods) {
if($scope.goods[index].state) {
arr.push($scope.goods[index].name);
}
}
if(arr.length <= 0) {
alert("請重新選擇刪除的項目！");
} else {
if(window.confirm("確定要刪除嗎？")) {
for(index in arr) {
for(index2 in $scope.goods) {
if(arr[index] == $scope.goods[index2].name) {
$scope.goods.splice(index2, 1);
}
}
}
} else {
alert("你已取消刪除!");
alert("請重新選擇刪除的項目");
}
}
}
//刪除
$scope.Delete = function(delName) {
if(window.confirm("你確定要刪除嗎？")) {
for(index in $scope.goods) {
if(delName == $scope.goods[index].name) {
$scope.goods.splice(index, 1);
alert("你已刪除成功了喲！");
return;
}
}
} else {
alert("你已取消刪除了喲！");
alert("請重新選擇刪除的項目");
}
}
//新增產(chǎn)品
$scope.formShow = false;
$scope.add = function()
{
if($scope.formShow) {
$scope.formShow = false;
} else?
{
$scope.formShow = true;
$scope.updateShow = false;
}
}

//提交新加商品進行驗證
$scope.newId = "";
$scope.newName = "";
$scope.newPrice = "";
$scope.checkSub = [];
$scope.divShow = false;
$scope.sub = function() {
$scope.checkSub = [];
if ($scope.newId=="" || $scope.newId==null)
{
$scope.checkSub.push("產(chǎn)品編號為空");
} else if (isNaN($scope.newId))
{
$scope.checkSub.push("產(chǎn)品編號不是整數(shù)");
}
if($scope.newName=="" || $scope.newName==null)?
{
$scope.checkSub.push("產(chǎn)品名稱為空");
}
if ($scope.newPrice=="" || $scope.newPrice==null)
{
$scope.checkSub.push("產(chǎn)品價格為空");
} else if (isNaN($scope.newPrice))
{
$scope.checkSub.push("產(chǎn)品價格不是整數(shù)");
}

if (window.confirm("確定要添加嗎？請你再核實一遍!"))?
{
if ($scope.checkSub.length>0)?
{
$scope.divShow=true;
} else
{
$scope.divShow=false;
var newSp={
"id":parseInt($scope.newId),
"name":$scope.newName,
"price":parseInt($scope.newPrice),
state:false
};
$scope.goods.push(newSp);
$scope.formShow=false;
}
alert("你已經(jīng)添加成功了喲!");
}

}

//修改頁面
$scope.updateShow = false;
$scope.updateId = "";
$scope.updateName = "";
$scope.updatePrice = "";
$scope.Update=function(sp){
if (window.confirm("你確定要修改嗎？請再考慮一下!"))
{
$scope.updateShow = true;
$scope.formShow=false;
$scope.updateId=sp.id;
$scope.updateName=sp.name;
$scope.updatePrice=sp.price;

} else
{
alert("你已經(jīng)取消了有修改喲！");
}
}

$scope.updateSub=function(){
$scope.updateArr=[];
if ($scope.updateName=="" || $scope.updateName==null)?
{
$scope.updateArr.push("產(chǎn)品名稱為空");
}
if ($scope.updatePrice=="" || $scope.updatePrice==null)?
{
$scope.updateArr.push("產(chǎn)品價格為空");
}
else if (isNaN($scope.updatePrice))
{
$scope.updateArr.push("產(chǎn)品價格不是整數(shù)");
}

//驗證不滿足
if ($scope.updateArr.length>0)?
{
$scope.yz=true;
} else
{
$scope.yz=false;
for (index in $scope.goods)
{
if (parseInt($scope.updateId)==$scope.goods[index].id)?
{
$scope.goods[index].name=$scope.updateName;
$scope.goods[index].price=$scope.updatePrice;
$scope.updateShow=false;
} else
{
alert("驗證成功!");
}
}
}
}

});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>購物車</h3>
<input type="text" size="10" placeholder="產(chǎn)品名稱" ng-model="search" />產(chǎn)品價格
<select ng-model="goodPrice">
<option>--請選擇--</option>
<option>0-2000</option>
<option>2001-3000</option>
<option>3001-4000</option>
<option>4001-5000</option>
<option>5001-6000</option>
<option>6001-7000</option>
<option>7001-8000</option>
<option>8001-無窮大</option>
</select>
<select ng-model="selOder">
<option value="">排序方式</option>
<option value="id">id正序</option>
<option value="-id">id逆序</option>
<option value="price">價格正序</option>
<option value="-price">價格逆序</option>
</select>
<button ng-click="deleteAll()" style="cursor: pointer;">批量刪除</button>
<br /><br />
<table border="1px solid blue" cellspacing="0" cellpadding="12">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></th>
<th>產(chǎn)品編號</th>
<th>產(chǎn)品姓名</th>
<th>產(chǎn)品價格</th>
<th>操作</th>
</tr>
</thead>

<tbody>
<tr ng-repeat="sp in goods|filter:{'name':search} | orderBy:selOder" ng-show="isShow(sp.price)">
<td><input type="checkbox" ng-model="sp.state" ng-click="checkSelectAll()" /></td>
<td>{{sp.id}}</td>
<td>{{sp.name}}</td>
<td>{{sp.price | currency:"￥:"}}</td>
<td>
<button ng-click="Delete(sp.name)" style="cursor: pointer;">刪除</button>
<button ng-click="Update(sp)" style="cursor: pointer;">修改</button>
</td>
</tr>
</tbody>
</table><br />
<button ng-click="add()" style="cursor: pointer;">添加新產(chǎn)品</button><br /><br />
<form style="border: 1px solid blue; width: 300px;" ng-show="formShow" method="post">
<h3>添加商品</h3>商品編號:
<input type="text" placeholder="商品編號" ng-model="newId" /><br /><br />商品名稱:
<input type="text" placeholder="商品名稱" ng-model="newName" /><br /><br />商品價格:
<input type="text" placeholder="商品價格" ng-model="newPrice" /><br /><br />
<div style="border: 1px solid blue;width: 250px; background-color: pink;" ng-show="divShow">
<ul>
<li ng-repeat="chenk in checkSub">{{chenk}}</li>
</ul>
</div><br />
<input type="button" value="提交" ng-click="sub()" style="cursor: pointer;" />
</form>

<form style="border: 1px solid blue; width: 300px;" ng-show="updateShow" method="post">
<h3>修改商品</h3>商品編號:
<input type="text" placeholder="商品編號" ng-model="updateId" disabled="disabled" /><br /><br />商品名稱:
<input type="text" placeholder="商品名稱" ng-model="updateName" /><br /><br />商品價格:
<input type="text" placeholder="商品價格" ng-model="updatePrice" /><br /><br />
<div style="border: 1px solid blue;width: 250px; background-color: pink;" ng-show="yz">
<ul>
<li ng-repeat="chenk in updateArr">{{chenk}}</li>
</ul>
</div><br />
<input type="button" value="提交" ng-click="updateSub()" style="cursor: pointer;" />
</form>

</center>
</body>

</html>

總結(jié)

以上是生活随笔為你收集整理的Shoping~添加+修改+删除+批量删除的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：张宇1000题线性代数第五章线性方程
下一篇： hdu 2648 shoping