<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../agulajs/angular.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.goods=[{
id:290,
name:"ipad",
price:1420,
state: false
},{
id:80,
name:"iphone",
price:5400,
state: false
},{
id:910,
name:"imac",
price:15400,
state: false
},{
id:500,
name:"ipad air",
price:2340,
state: false
}];
/*//点击表头对其进行正逆排序
$scope.toog=function(tit){
$scope.title=tit;
$scope.desc=!$scope.desc;
}*/
//点击列明进行排序
$scope.orderFlag = "";
$scope.orderLine = "id";
$scope.toog = function(line) {
$scope.orderLine = line;
if($scope.orderFlag == "") {
$scope.orderFlag = "-";
} else {
$scope.orderFlag = "";
}
}
//根据index进行删除
$scope.delte=function(delName){
for(index in $scope.goods){
if(delName == $scope.goods[index].name){
if(confirm("确认要删除吗")){
$scope.goods.splice(index,1)
}
}else{
}
}
}
//下拉菜单筛选选中商品价格
$scope.produce="--请选择--";
$scope.isifshow=function(price){
if($scope.produce=="--请选择--"){
return true;
}else{
var arr=$scope.produce.split("-");
var priceMin = arr[0];
var priceMax = arr[1];
if(price<priceMin || price>priceMax){
return false;
}else{
return true;
}
}
}
//定义下拉菜单排序规则
$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.update=function(price){
//获得价格
for(index in $scope.goods){
if(price==$scope.goods[index].price){
var result=parseInt(window.prompt("请输入要修改的价格",price));
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.checkselectAllfun=function(){
var flag=false;
//遍历数组,获得对象的状态
for(index in $scope.goods){
//alert($scope.products[index].state)
//如果有一个对象状态是false即未选中状态,就把标志位flag变为true。
if(!$scope.goods[index].state){
flag=true;
}
}
//判断是否没有一个是未选中状态
if(flag){//这是正面至少有一个未选中
$scope.selectAll=false;//全选状态为false
}else{
$scope.selectAll=true;//全选状态为true
}
}
//批量删除
$scope.delselect=function(){
//定义一个空数组,存放状态是选中的对象
var isChected=[];
//遍历数组,通过数组对象的状态,判断是否删除当前遍历对象
for(index in $scope.goods){
//如果遍历的当前对象状态为true ,则删除
if($scope.goods[index].state){
//把当前选中的对象,一个个追加到isChected数组中
isChected.push($scope.goods[index]);
}
}
//遍历isSelected数组,因为isSelected数组中存放的是所有选中项的对象。
for(index in isChected){
var name=isChected[index].name;
for(index2 in $scope.goods){
if(name==$scope.goods[index2].name){
//alert(Window.confirm("确定要全部删除吗??"))
if(confirm("确定要全部删除吗??")){
//$scope.goods.splice(index2,1)
$scope.goods=[];
}
}
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>购物车</h3>
<div>
<input type="text" placeholder="产品名称" ng-model="serch" style="width: 80px;"/>
产品价格<select ng-model="produce">
<option>--请选择--</option>
<option>0-1000</option>
<option>1001-2000</option>
<option>2001-3000</option>
<option>3001-4000</option>
<option>4001-5000</option>
<option>5001-6000</option>
<option>6001-无穷大</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>
</div>
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></td>
<td ng-click="toog('id')">产品编号</td>
<td ng-click="toog('name')">产品名称</td>
<td ng-click="toog('price')">产品价格</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in goods|filter:serch|orderBy:(orderFlag+orderLine)" ng-if="isifshow(user.price)">
<!-- <tr ng-repeat="user in goods|filter:serch|orderBy:title:desc" ng-if="isifshow(user.price)">
-->
<td><input type="checkbox" ng-model="user.state" ng-click="checkselectAllfun()"></td>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.price}}</td>
<td>
<button ng-click="delte(user.name)">删除</button>
<button ng-click="update(user.price)">修改</button>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../agulajs/angular.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.goods=[{
id:290,
name:"ipad",
price:1420,
state: false
},{
id:80,
name:"iphone",
price:5400,
state: false
},{
id:910,
name:"imac",
price:15400,
state: false
},{
id:500,
name:"ipad air",
price:2340,
state: false
}];
/*//点击表头对其进行正逆排序
$scope.toog=function(tit){
$scope.title=tit;
$scope.desc=!$scope.desc;
}*/
//点击列明进行排序
$scope.orderFlag = "";
$scope.orderLine = "id";
$scope.toog = function(line) {
$scope.orderLine = line;
if($scope.orderFlag == "") {
$scope.orderFlag = "-";
} else {
$scope.orderFlag = "";
}
}
//根据index进行删除
$scope.delte=function(delName){
for(index in $scope.goods){
if(delName == $scope.goods[index].name){
if(confirm("确认要删除吗")){
$scope.goods.splice(index,1)
}
}else{
}
}
}
//下拉菜单筛选选中商品价格
$scope.produce="--请选择--";
$scope.isifshow=function(price){
if($scope.produce=="--请选择--"){
return true;
}else{
var arr=$scope.produce.split("-");
var priceMin = arr[0];
var priceMax = arr[1];
if(price<priceMin || price>priceMax){
return false;
}else{
return true;
}
}
}
//定义下拉菜单排序规则
$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.update=function(price){
//获得价格
for(index in $scope.goods){
if(price==$scope.goods[index].price){
var result=parseInt(window.prompt("请输入要修改的价格",price));
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.checkselectAllfun=function(){
var flag=false;
//遍历数组,获得对象的状态
for(index in $scope.goods){
//alert($scope.products[index].state)
//如果有一个对象状态是false即未选中状态,就把标志位flag变为true。
if(!$scope.goods[index].state){
flag=true;
}
}
//判断是否没有一个是未选中状态
if(flag){//这是正面至少有一个未选中
$scope.selectAll=false;//全选状态为false
}else{
$scope.selectAll=true;//全选状态为true
}
}
//批量删除
$scope.delselect=function(){
//定义一个空数组,存放状态是选中的对象
var isChected=[];
//遍历数组,通过数组对象的状态,判断是否删除当前遍历对象
for(index in $scope.goods){
//如果遍历的当前对象状态为true ,则删除
if($scope.goods[index].state){
//把当前选中的对象,一个个追加到isChected数组中
isChected.push($scope.goods[index]);
}
}
//遍历isSelected数组,因为isSelected数组中存放的是所有选中项的对象。
for(index in isChected){
var name=isChected[index].name;
for(index2 in $scope.goods){
if(name==$scope.goods[index2].name){
//alert(Window.confirm("确定要全部删除吗??"))
if(confirm("确定要全部删除吗??")){
//$scope.goods.splice(index2,1)
$scope.goods=[];
}
}
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>购物车</h3>
<div>
<input type="text" placeholder="产品名称" ng-model="serch" style="width: 80px;"/>
产品价格<select ng-model="produce">
<option>--请选择--</option>
<option>0-1000</option>
<option>1001-2000</option>
<option>2001-3000</option>
<option>3001-4000</option>
<option>4001-5000</option>
<option>5001-6000</option>
<option>6001-无穷大</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>
</div>
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></td>
<td ng-click="toog('id')">产品编号</td>
<td ng-click="toog('name')">产品名称</td>
<td ng-click="toog('price')">产品价格</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in goods|filter:serch|orderBy:(orderFlag+orderLine)" ng-if="isifshow(user.price)">
<!-- <tr ng-repeat="user in goods|filter:serch|orderBy:title:desc" ng-if="isifshow(user.price)">
-->
<td><input type="checkbox" ng-model="user.state" ng-click="checkselectAllfun()"></td>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.price}}</td>
<td>
<button ng-click="delte(user.name)">删除</button>
<button ng-click="update(user.price)">修改</button>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>