<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular/angular.js" ></script>
<style>
table tr:nth-child(even){
background-color: #00FFFF;
}
table tr:nth-child(odd){
background-color:aquamarine;
}
</style>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.list = [{
"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.xuanze="--请选择--";
$scope.isShow=function(price){
if($scope.xuanze=="--请选择--"){
return true;
}else{
var pricearr=$scope.xuanze.split("-");
var min=pricearr[0];
var max=pricearr[1];
if(price>min&&price<max){
return true;
}else{
return false;
}
}
}
//全选
$scope.quanxuan=false;
$scope.quanxuan1=function(){
if($scope.quanxuan){
for(index in $scope.list){
$scope.list[index].state=true;
}
}else{
for(index in $scope.list){
$scope.list[index].state=false;
}
}
}
//全不选
$scope.quanxuan2=function(){
var a=0;
for(index in $scope.list){
if(!$scope.list[index].state){
$scope.quanxuan=false;
}else{
a++;
}
if(a==$scope.list.length){
$scope.quanxuan=true;
}else{
$scope.quanxuan=false;
}
}
}
//批量删除
$scope.plsc=function(){
var arr=[];
for(index in $scope.list){
if($scope.list[index].state){
arr.push($scope.list[index].name);
}
}
if(arr.length<=0){
alert("请选择删除项");
}else{
if(window.confirm("确定要删除么?")){
for(index in arr){
for(index2 in $scope.list){
if(arr[index]==$scope.list[index2].name){
$scope.list.splice(index2,1);
}
}
}
}
}
}
//添加界面
$scope.tjxs=false;
$scope.tianjia=function(){
if($scope.tjxs){
$scope.tjxs=false;
}else{
$scope.tjxs=true;
$scope.xg=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("产品编号为空");
}else if(isNaN($scope.newId)){
$scope.checkSub.push("编号名称不是整数");
}
if($scope.newName==""|| $scope.newName==null){
$scope.checkSub.push("产品价格为空");
}
if($scope.newPrice==""||$scope.newPrice==null){
$scope.checkSub.push("产品价格为空");
}else if(isNaN($scope.newPrice)){
$scope.checkSub.push("产品价格不是整数");
}
if($scope.checkSub.length>0){
$scope.divShow=true;
}else{
$scope.divShow=false;
var newPro={
"id":parseInt($scope.newId),
"name":$scope.newName,
"price":parseInt($scope.newPrice),
state:false
};
$scope.list.push(newPro);
}
}
//修改
$scope.xg=false;
$scope.xgId="";
$scope.xgName="";
$scope.xgPrice="";
$scope.xg1=function(sz){
$scope.xg=true;
$scope.tjxs=false;
$scope.xgId=sz.id;
$scope.xgName=sz.name;
$scope.xgPrice=sz.price;
}
$scope.xg2=function(){
$scope.xgarr=[];
if($scope.xgName==""||$scope.xgName==null){
$scope.xgarr.push("产品名称为空");
}
if($scope.xgPrice==""||$scope.xgPrice==null){
$scope.xgarr.push("产品价格为空");
}else if(isNaN($scope.xgPrice)){
$scope.xgarr.push("产品价格不是整数");
}
if($scope.xgarr.length>0){
$scope.haha=true;
}else{
$scope.haha=false;
for(index in $scope.list){
if(parseInt($scope.xgId)==$scope.list[index].id){
$scope.list[index].name=$scope.xgName;
$scope.list[index].price=$scope.xgPrice;
$scope.xg=false;
}
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>购物车</h3>
<input type="text" size="10" placeholder="产品名称" ng-model="search"/> 产品价格
<select ng-model="xuanze">
<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="paixu">
<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="plsc()">批量删除</button>
<br /><br />
<table border="1px solid blue" cellpadding="8" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="quanxuan" ng-click="quanxuan1()"/> </th>
<th>产品编号</th>
<th>产品名称</th>
<th>产品价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat=" sz in list | filter:search | orderBy:paixu" ng-show="isShow(sz.price)">
<td><input type="checkbox" ng-model="sz.state" ng-click="quanxuan2()"/></td>
<td>{{sz.id}}</td>
<td>{{sz.name}}</td>
<td>{{sz.price}}</td>
<td>
<button>删除</button>
<button ng-click="xg1(sz)">修改</button>
</td>
</tr>
</tbody>
</table><br />
<button ng-click="tianjia()">添加新产品</button>
<form style="border: 1px solid blue; width: 300px;" ng-show="tjxs">
<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()" />
</form>
<!--
描述：修改
-->
<form style="border: 1px solid blue; width: 300px;" ng-show="xg">
<h3>修改商品</h3> 商品编号：
<input type="text" placeholder="商品编号" ng-model="xgId" /><br /><br /> 商品名称：
<input type="text" placeholder="商品名称" ng-model="xgName" /><br /><br /> 商品价格：
<input type="text" placeholder="商品价格" ng-model="xgPrice" /><br /><br />
<div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="haha">
<ul>
<li ng-repeat="chenk in checkSub">{{chenk}}</li>
</ul>
</div><br />
<input type="button" value="提交" ng-click="xg2()" />
</form>
</center>
</body>
</html>
购物车的修改查找排序批量删除
最新推荐文章于 2022-02-28 20:00:08 发布
扫一扫
1797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
