全选反选

最新推荐文章于 2023-04-12 16:09:42 发布

四夕520

最新推荐文章于 2023-04-12 16:09:42 发布

阅读量212

点赞数

本文链接：https://blog.csdn.net/Luokaiqin520/article/details/79454140

版权

<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module("App",[]);
app.controller("Democtrl",function($scope){
$scope.datas=[
{
id:2001,
shopname:"iPhoneX",
count:3,
price:8699,
},
{
id:2002,
shopname:"iPhone8",
count:4,
price:6699,
}
,
{
id:2003,
shopname:"iPhone7p",
count:2,
price:5699,
}
,
{
id:2004,
shopname:"iPhone7",
count:1,
price:5099,
}
];
$scope.minus=function($index){
if ($scope.datas[$index].count<=0) {
$scope.datas[$index].count=0;
}else{
$scope.datas[$index].count--;
}
}
$scope.add=function($index){
$scope.datas[$index].count++;
}
$scope.del=function($index){
$scope.datas.splice($index,1);
}

$scope.counts=function(){
var a=0;
for (var i=0;i<$scope.datas.length;i++) {
a+=$scope.datas[i].count;
}
return a;
}
$scope.totalprice=function(){
var a=0;
for (var i=0;i<$scope.datas.length;i++) {
a+=$scope.datas[i].count*$scope.datas[i].price;
}
return a;
}
$scope.alldel=function($index){
for(var i=$scope.datas.length;i>=0;i--){
$scope.datas.splice(i,1);
}
}
$scope.savecommodity=function(){
var newconmmodity={
id:$scope.newid,
shopname:$scope.newname,
count:$scope.newcount,
price:$scope.newprice,
}
$scope.datas.push(newconmmodity);
$scope.newid="";
$scope.newname="";
$scope.newcount="";
$scope.newprice="";
}

$scope.updatesh=false;
$scope.addsh=true;
$scope.update=function($index){
$scope.addsh=false;
$scope.updatesh=true;
$scope.newindex=$index;
$scope.newid=$scope.datas[$index].id;
$scope.newname=$scope.datas[$index].shopname;
$scope.newcount=$scope.datas[$index].count;
$scope.newprice=$scope.datas[$index].price;
}
$scope.updatecommodity=function($index){
$scope.addsh=true;
$scope.updatesh=false;
$scope.datas[$scope.newindex].id=$scope.newid;
$scope.datas[$scope.newindex].shopname=$scope.newname;
$scope.datas[$scope.newindex].count=$scope.newcount;
$scope.datas[$scope.newindex].price=$scope.newprice;
$scope.newid="";
$scope.newname="";
$scope.newcount="";
$scope.newprice="";
}
$scope.orderKey="count";
$scope.searchname="";

$scope.ckin=function($index){
$scope.datas[$index].ck=!$scope.datas[$index].ck;
}
$scope.pl=function(){
var a=confirm("确认删除?");
if (a) {
if($scope.ck){
for(var i=$scope.datas.length-1;i>=0;i--){
$scope.datas.splice(i,1);
}
$scope.ck=!$scope.ck;
}
for (var i=$scope.datas.length-1;i>=0;i--) {
if ($scope.datas[i].ck) {
$scope.datas.splice(i,1);
}
}
}
}
})

</script>
<style>
table tr:nth-child(even){
background-color: #80FFFF;
}
table tr:nth-child(odd){
background-color:#80FF80;
}
</style>
</head>
<body ng-controller="Democtrl">
<input type="text" placeholder="按照商品名称查询..." ng-model="searchname"/>
数量排序:
<select ng-model="b">
<option value="请选择" selected="selected">--请选择--</option>
<option value="count">升序</option>
<option value="-count">降序</option>
</select>
<input type="button" value="批量删除" ng-click="pl()"/>
<table border="1" cellspacing="0" cellpadding="1">
<tr style="background-color: white;">
<td><input type="checkbox" ng-model="ck"/></td>
<td>产品编号</td>
<td>产品名称</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in datas | orderBy:b |filter :{shopname:searchname}">
<td><input type="checkbox" ng-checked="ck" ng-click="ckin($index)"/></td>
<td>{{x.id}}</td>
<td>{{x.shopname}}</td>
<td><input type="button" value="-" ng-click="minus($index)"/><input type="number" id="" ng-model="x.count" /><input type="button" value="+" ng-click="add($index)"/></td>
<td>{{x.price}}</td>
<td>{{x.count*x.price}}</td>
<td><input type="button" value="删除" ng-click="del($index)"/>
<input type="button" value="修改" ng-click="update($index)"/></td>
</tr>

</table>
总数量:{{counts()}} 总价:{{totalprice()}} <input type="button" value="清空购物车" ng-click="alldel()"/>
<br /><br />
<div ng-show="addsh" >
----------------添加商品-------<br />
商品编号:<input type="number" ng-model="newid" /><br />
商品名称:<input type="text" ng-model="newname" /><br />
商品数量:<input type="number" ng-model="newcount" /><br />
商品单价:<input type="text" ng-model="newprice" /><br />
<input type="button" value="添加" ng-click="savecommodity()" />
</div>
<div ng-show="updatesh" >
----------------修改商品-------<br />
商品编号:<input type="number" ng-model="newid" /><br />
商品名称:<input type="text" ng-model="newname" /><br />
商品数量:<input type="number" ng-model="newcount" /><br />
商品单价:<input type="text" ng-model="newprice" /><br />
<input type="button" value="修改" ng-click="updatecommodity()" />
</div>
</body>
</html>