购物车

yifeng_csdn

于 2017-12-17 20:07:15 发布

阅读量208

点赞数

本文链接：https://blog.csdn.net/GGGalaxie/article/details/78827410

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-2.1.0.min.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//数组
$scope.goods=[{
id:80,
name:"iPhone",
price:5400,
state:false
},{
id:290,
name:"iPad",
price:1400,
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.deleteData=function(name){
for(index in $scope.goods){
if(name == $scope.goods[index].name){
$scope.goods.splice(index,1);
}
}
}
//全选全不选
$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.updatePrice=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;
}
}
}
}
}
//批量删除
$scope.delSelect=function(){
//创建一个空数组
var isSelected=[];
for(index in $scope.goods){
if($scope.goods[index].state){
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);
}
}
}
}
//显示隐藏
/*$scope.isShow=function(){
if($scope.goods.length > 0){
return true;
}else{
return false;
}
}*/
});
</script>
<style>
td{text-align: center;}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>购物车</h3>
产品名称:<input type="text"placeholder="产品名称" ng-model="search" />
排序:
<select ng-model="selOrder">
<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="1px solid black" cellpadding="10" cellspacing="0" width="600px">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></th>
<th>产品编号</th>
<th>产品名称</th>
<th>产品价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="g in goods | filter:{'name':search} | orderBy:selOrder">
<td><input type="checkbox" ng-model="g.state"></td>
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td><button ng-click="deleteData(g.name)">删除</button><button ng-click="updatePrice(g.price)">修改</button></td>
</tr>
</tbody>
</table>

</center>
</body>
</html>

yifeng_csdn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车

var app=angular.module("myApp",[]);app.controller("myCtrl",function($scope){//数组$scope.goods=[{id:80,name:"iPhone",price:5400,state:false},{id:290,name:"iPad",price:1400,state:
复制链接

扫一扫