<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
tr:nth-child(odd) {
background: palevioletred;
}
tr:nth-child(even) {
background: white;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<center>
<input type="text" placeholder="输入商品名" ng-model="namekey" />
<select ng-model="orderprice">
<option value="">--请选择--</option>
<option value="gprice">按单价正序排序</option>
<option value="-gprice">按单价倒序排序</option>
</select>
<input type="button" value="全选/反选" id="xuan"/>
<input type="button" value="批量删除" ng-click="delall(x.id)"/>
<table border="1px" width="50%" style="text-align: center;" ng-show="isShow">
<tr style="background: gray;">
<th><input type="checkbox" ng-model="all" /></th>
<th>商品名</th>
<th>商品数量</th>
<th>商品单价</th>
<th>商品总价</th>
<th>删除</th>
</tr>
<tr ng-repeat="x in shops|filter:namekey|orderBy:orderprice">
<td><input type="checkbox" ng-model="all" value="{{x.gid}}" /></td>
<td>{{x.gname}}</td>
<td>
<input type="button" value="-" ng-click="jian(x.gid)"/>
{{x.gnum}}
<input type="button" value="+" ng-click="jia(x.gid)"/>
</td>
<td>￥：{{x.gprice}}</td>
<td>￥：{{x.gnum*x.gprice}}</td>
<td><input type="button" value="删除" ng-click="del(x.gid)" /></td>
</tr>
</table>
<input type="button" value="清空购物车" ng-click="qk(x.gid)" />
</center>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.isShow = true;
$scope.shops = [{
"gid": 001,
"gname": "手机",
"gnum": 3,
"gprice": 1000,
"gcount": 3000
}, {
"gid": 002,
"gname": "电脑",
"gnum": 3,
"gprice": 2000,
"gcount": 6000
}, {
"gid": 003,
"gname": "电视",
"gnum": 6,
"gprice": 500,
"gcount": 3000
}];
//单个删除
$scope.del = function(id) {
//点击删除后提示
var cbs = confirm("确定要删除吗？");
if(cbs) {
for(var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].gid == id) {
$scope.shops.splice(i, 1);
break;
}
}
}
}
//清空购物车
$scope.qk = function(id) {
var cbs = confirm("确定要清空购物车吗？");
if(cbs) {
$scope.isShow = false;
}
}
//数量的减
$scope.jian=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].gid==id){
//判断数量是否是1
if($scope.shops[i].gnum==1){//如果等于1就删除
var cbs = confirm("确定要删除吗？");
if(cbs) {
for(var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].gid == id) {
$scope.shops.splice(i, 1);
break;
}
}
}
}else{//否则就减数量
$scope.shops[i].gnum--;
break;
}
}
}
}
//数量的加
$scope.jia=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].gid==id){
$scope.shops[i].gnum++;
break;
}
}
}
//全选/反选
$("#xuan").click(function(){
//判断是否是选中状态
var cbs=$("[type=checkbox]");
for (var i = 0; i < cbs.length; i++) {
var cb=cbs[i];
cb.checked=!cb.checked;
}
});
//批量删除
$scope.delall=function(id){
var cbs=$("input:checked");
if(cbs.length==0){
alert("请选中数据再删除！");
}else{
var cb=confirm("确定要删除吗？");
cbs.each(function(){//遍历元素
if(cb){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].gid==$(this).val()){//如果是选中的值就删除
$scope.shops.splice(i,1);
}
}
}
});
}
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
tr:nth-child(odd) {
background: palevioletred;
}
tr:nth-child(even) {
background: white;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<center>
<input type="text" placeholder="输入商品名" ng-model="namekey" />
<select ng-model="orderprice">
<option value="">--请选择--</option>
<option value="gprice">按单价正序排序</option>
<option value="-gprice">按单价倒序排序</option>
</select>
<input type="button" value="全选/反选" id="xuan"/>
<input type="button" value="批量删除" ng-click="delall(x.id)"/>
<table border="1px" width="50%" style="text-align: center;" ng-show="isShow">
<tr style="background: gray;">
<th><input type="checkbox" ng-model="all" /></th>
<th>商品名</th>
<th>商品数量</th>
<th>商品单价</th>
<th>商品总价</th>
<th>删除</th>
</tr>
<tr ng-repeat="x in shops|filter:namekey|orderBy:orderprice">
<td><input type="checkbox" ng-model="all" value="{{x.gid}}" /></td>
<td>{{x.gname}}</td>
<td>
<input type="button" value="-" ng-click="jian(x.gid)"/>
{{x.gnum}}
<input type="button" value="+" ng-click="jia(x.gid)"/>
</td>
<td>￥：{{x.gprice}}</td>
<td>￥：{{x.gnum*x.gprice}}</td>
<td><input type="button" value="删除" ng-click="del(x.gid)" /></td>
</tr>
</table>
<input type="button" value="清空购物车" ng-click="qk(x.gid)" />
</center>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.isShow = true;
$scope.shops = [{
"gid": 001,
"gname": "手机",
"gnum": 3,
"gprice": 1000,
"gcount": 3000
}, {
"gid": 002,
"gname": "电脑",
"gnum": 3,
"gprice": 2000,
"gcount": 6000
}, {
"gid": 003,
"gname": "电视",
"gnum": 6,
"gprice": 500,
"gcount": 3000
}];
//单个删除
$scope.del = function(id) {
//点击删除后提示
var cbs = confirm("确定要删除吗？");
if(cbs) {
for(var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].gid == id) {
$scope.shops.splice(i, 1);
break;
}
}
}
}
//清空购物车
$scope.qk = function(id) {
var cbs = confirm("确定要清空购物车吗？");
if(cbs) {
$scope.isShow = false;
}
}
//数量的减
$scope.jian=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].gid==id){
//判断数量是否是1
if($scope.shops[i].gnum==1){//如果等于1就删除
var cbs = confirm("确定要删除吗？");
if(cbs) {
for(var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].gid == id) {
$scope.shops.splice(i, 1);
break;
}
}
}
}else{//否则就减数量
$scope.shops[i].gnum--;
break;
}
}
}
}
//数量的加
$scope.jia=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].gid==id){
$scope.shops[i].gnum++;
break;
}
}
}
//全选/反选
$("#xuan").click(function(){
//判断是否是选中状态
var cbs=$("[type=checkbox]");
for (var i = 0; i < cbs.length; i++) {
var cb=cbs[i];
cb.checked=!cb.checked;
}
});
//批量删除
$scope.delall=function(id){
var cbs=$("input:checked");
if(cbs.length==0){
alert("请选中数据再删除！");
}else{
var cb=confirm("确定要删除吗？");
cbs.each(function(){//遍历元素
if(cb){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].gid==$(this).val()){//如果是选中的值就删除
$scope.shops.splice(i,1);
}
}
}
});
}
}
});
</script>
</body>
</html>