<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../angular/angular.js" ></script>
<script type="text/javascript" src="../angular/angular-route.js" ></script>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
/*声明数据对象,初始化商品信息,数据自拟且不低于四条*/
$scope.search="";
$scope.goods=[
{ "id":80,
"name":"iphone",
"price":5400,
state:false
},
{ "id":1200,
"name":"ipad mini",
"price":2200,
state:false
},
{ "id":500,
"name":"ipad air",
"price":"2300",
state:false
},
{ "id":29,
"name":"ipad",
"price":1420,
state:false
},
{ "id":910,
"name":"imac",
"price":15400,
state:false
}
];
//点击列明进行排序
$scope.orderFlag="";
$scope.orderLine="id";
$scope.orderDesc=function(line){
$scope.orderLine=line;
if ($scope.orderFlag=="")
{
$scope.orderFlag="-";
}else
{
$scope.orderFlag="";
}
}
//下拉菜单删选商品价格
$scope.goodsPrice="--请选择--";
$scope.ifShow=function(price){
if ($scope.goodsPrice=="--请选择--") {
return true;
}
else{
var arr=$scope.goodsPrice.split("-");
var priceMin=arr[0];
var priceMax=arr[1];
if (price<priceMin || price>priceMax)
{
//alert("111");
return false;
}
else{
return true;
}
}
}
//点击删除按钮,删除当前商品
$scope.delGoods=function(delName){
//alert(delName);
for (index in $scope.goods)
{
//alert("删除前,角标为"+index+"长度为:"+$scope.products.length);
if (delName==$scope.goods[index].name)
{
$scope.goods.splice(index,1);
//alert("删除后,角标为"+index+"长度为:"+$scope.products.length);
} else{
}
}
}
//定义下拉菜单排序规则
$scope.selOrder;
$scope.orderSel=function(){
if ($scope.selOrder=="id")
{
$scope.orderFlag="";
$scope.orderLine="id";
}else if($scope.selOrder=="-id")
{
$scope.orderFlag="-";
$scope.orderLine="id";
}else if($scope.selOrder=="price")
{
$scope.orderFlag="";
$scope.orderLine="price";
}else if($scope.selOrder=="-price")
{
$scope.orderFlag="-";
$scope.orderLine="price";
};
}
//定义修改价格
$scope.updateGoods=function(price){
//获得价格
for(index in $scope.goods)
{
if (price==$scope.goods[index].price)
{
//修改价格
var result=parseInt(window.prompt("请输入你要修改的价格",price));
//在这之前对result的结果进行非字符串判断
if (result<0)
{
alert("输入有误,请重新输入更改");
}else{
if (window.confirm("确定要将"+$scope.goods[index].name+"的价格更改为:"+result+"吗?"))
{
$scope.goods[index].price=result;
}
}
}else{
}
}
}
//全选、全不选
$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 flag=false;
//遍历数组,获得对象的状态
for (index in $scope.goods)
{
if ($scope.goods[index].state)
{
flag=true;
}
}
//判断是否没有一个是未选中状态
if (flag)
{
//这是正面至少有一个未选中
$scope.selectAll=false;//全选状态为false
} else{
//一定是全部被选中
$scope.selectAll=true;//全选状态为true
}
}
//批量删除
$scope.delSelect=function()
{
//自己添加选中状态判断,就是有没有一个都没选中的情况。
//定义一个空数组,盛放状态是选中的对象
var isSelected=[];
//遍历数组,通过数组对象的状态,判断是否删除当前遍历的对象
for(index in $scope.goods)
{
//如果遍历的当前对象状态为true,则删除
if ($scope.goods[index].state)
{
//把当前选中的对象,一个个追加到isSelected数组中。
isSelected.push($scope.goods[index]);
}
}
for(index in isSelected)
{
var name=isSelected[index].name;
for (index2 in $scope.goods)
{
if (name=$scope.goods[index2].name)
{
$scope.goods.splice(index2,1);
}
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>购物车</h3>
<input type="text" placeholder="产品名称" ng-model="search" />产品价格
<select ng-model="goodsPrice">
<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="selOrder" ng-change="orderSel()">
<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="delSelect()">批量删除</button>
<br /><br />
<table border="1 solid #000;" cellspacing="0" cellpadding="10" >
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></th>
<th ng-click="orderDesc('id')">产品编号</th>
<th ng-click="orderDesc('name')">产品名称</th>
<th ng-click="orderDesc('price')">产品价格</th>
<th>操作</td>
</tr>
<tr ng-repeat="sp in goods | filter:{'name':search} | orderBy:(orderFlag+orderLine) " ng-if="ifShow(sp.price)">
<!-- <td><input type="checkbox" ng-model="goods.state" ng-click="checkSelect($index)"></td>-->
<td><input type="checkbox" ng-model="sp.state" ng-ciclk="checkSelectAll()"/></td>
<td>{{sp.id}}</td>
<td>{{sp.name}}</td>
<!--商品价格这一列需要在价格前面加上”RMB:”。-->
<td>{{sp.price|currency:"RMB:"}}
</td>
<td>
<button ng-click="delGoods(sp.name)">删除</button>
<button ng-click="updateGoods(sp.price)">修改</button>
</td>
</tr>
</table>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../angular/angular.js" ></script>
<script type="text/javascript" src="../angular/angular-route.js" ></script>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
/*声明数据对象,初始化商品信息,数据自拟且不低于四条*/
$scope.search="";
$scope.goods=[
{ "id":80,
"name":"iphone",
"price":5400,
state:false
},
{ "id":1200,
"name":"ipad mini",
"price":2200,
state:false
},
{ "id":500,
"name":"ipad air",
"price":"2300",
state:false
},
{ "id":29,
"name":"ipad",
"price":1420,
state:false
},
{ "id":910,
"name":"imac",
"price":15400,
state:false
}
];
//点击列明进行排序
$scope.orderFlag="";
$scope.orderLine="id";
$scope.orderDesc=function(line){
$scope.orderLine=line;
if ($scope.orderFlag=="")
{
$scope.orderFlag="-";
}else
{
$scope.orderFlag="";
}
}
//下拉菜单删选商品价格
$scope.goodsPrice="--请选择--";
$scope.ifShow=function(price){
if ($scope.goodsPrice=="--请选择--") {
return true;
}
else{
var arr=$scope.goodsPrice.split("-");
var priceMin=arr[0];
var priceMax=arr[1];
if (price<priceMin || price>priceMax)
{
//alert("111");
return false;
}
else{
return true;
}
}
}
//点击删除按钮,删除当前商品
$scope.delGoods=function(delName){
//alert(delName);
for (index in $scope.goods)
{
//alert("删除前,角标为"+index+"长度为:"+$scope.products.length);
if (delName==$scope.goods[index].name)
{
$scope.goods.splice(index,1);
//alert("删除后,角标为"+index+"长度为:"+$scope.products.length);
} else{
}
}
}
//定义下拉菜单排序规则
$scope.selOrder;
$scope.orderSel=function(){
if ($scope.selOrder=="id")
{
$scope.orderFlag="";
$scope.orderLine="id";
}else if($scope.selOrder=="-id")
{
$scope.orderFlag="-";
$scope.orderLine="id";
}else if($scope.selOrder=="price")
{
$scope.orderFlag="";
$scope.orderLine="price";
}else if($scope.selOrder=="-price")
{
$scope.orderFlag="-";
$scope.orderLine="price";
};
}
//定义修改价格
$scope.updateGoods=function(price){
//获得价格
for(index in $scope.goods)
{
if (price==$scope.goods[index].price)
{
//修改价格
var result=parseInt(window.prompt("请输入你要修改的价格",price));
//在这之前对result的结果进行非字符串判断
if (result<0)
{
alert("输入有误,请重新输入更改");
}else{
if (window.confirm("确定要将"+$scope.goods[index].name+"的价格更改为:"+result+"吗?"))
{
$scope.goods[index].price=result;
}
}
}else{
}
}
}
//全选、全不选
$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 flag=false;
//遍历数组,获得对象的状态
for (index in $scope.goods)
{
if ($scope.goods[index].state)
{
flag=true;
}
}
//判断是否没有一个是未选中状态
if (flag)
{
//这是正面至少有一个未选中
$scope.selectAll=false;//全选状态为false
} else{
//一定是全部被选中
$scope.selectAll=true;//全选状态为true
}
}
//批量删除
$scope.delSelect=function()
{
//自己添加选中状态判断,就是有没有一个都没选中的情况。
//定义一个空数组,盛放状态是选中的对象
var isSelected=[];
//遍历数组,通过数组对象的状态,判断是否删除当前遍历的对象
for(index in $scope.goods)
{
//如果遍历的当前对象状态为true,则删除
if ($scope.goods[index].state)
{
//把当前选中的对象,一个个追加到isSelected数组中。
isSelected.push($scope.goods[index]);
}
}
for(index in isSelected)
{
var name=isSelected[index].name;
for (index2 in $scope.goods)
{
if (name=$scope.goods[index2].name)
{
$scope.goods.splice(index2,1);
}
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>购物车</h3>
<input type="text" placeholder="产品名称" ng-model="search" />产品价格
<select ng-model="goodsPrice">
<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="selOrder" ng-change="orderSel()">
<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="delSelect()">批量删除</button>
<br /><br />
<table border="1 solid #000;" cellspacing="0" cellpadding="10" >
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></th>
<th ng-click="orderDesc('id')">产品编号</th>
<th ng-click="orderDesc('name')">产品名称</th>
<th ng-click="orderDesc('price')">产品价格</th>
<th>操作</td>
</tr>
<tr ng-repeat="sp in goods | filter:{'name':search} | orderBy:(orderFlag+orderLine) " ng-if="ifShow(sp.price)">
<!-- <td><input type="checkbox" ng-model="goods.state" ng-click="checkSelect($index)"></td>-->
<td><input type="checkbox" ng-model="sp.state" ng-ciclk="checkSelectAll()"/></td>
<td>{{sp.id}}</td>
<td>{{sp.name}}</td>
<!--商品价格这一列需要在价格前面加上”RMB:”。-->
<td>{{sp.price|currency:"RMB:"}}
</td>
<td>
<button ng-click="delGoods(sp.name)">删除</button>
<button ng-click="updateGoods(sp.price)">修改</button>
</td>
</tr>
</table>
</center>
</body>
</html>