<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<style>
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h2>我的购物车详情</h2>
<input type = "text" placeholder="请根据名称查询" ng-model="select" style="background-color: yellow;" />
<br><br>
<table border="1" style="width: 600px;">
<tr style="background: darkgray;">
<th ng-click="">编号</th>
<th>姓名</th>
<th>数量</th>
<th>价格</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr ng-repeat=" p in MyJson | filter:{gname:select} " class = "{{$index%2? 'red':'yellow' }}">
<th>{{p.gid}}</th>
<th>{{p.gname}}</th>
<th><input type="button" value = "+" ng-click="jia($index)"/>{{p.gnum}}<input type="button" value = "-" ng-click="jian($index,p.gname)"/></th>
<th>{{p.gprice}}</th>
<th>{{p.gnum * p.gprice}}</th>
<th><input type="checkbox"/></th>
</tr>
</table>
<input type = "button" value="{{zs}}"/>
<input type= "button" value = "清空购物车" ng-click="deleteAll()" style="background-color: yellow;" />
<input type = "button" value = "删除" ng-click="deleteMore()" style="background-color: yellow;" />
</center>
</body>
<script>
//创建控制器
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.select = ""; //过滤(查询)
$scope.MyJson = [
{"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.deleteMore = function(){
if(confirm("您确认要删除选中的商品吗?")){
//找到所有被选中的多选框
var check = $(":checkbox:checked");
if(check.length == 0){
alert("请选择要删除的数据");
}
//做循环
for(var i = check.length-1;i>=0;i--){
$scope.MyJson.splice(check[i].value,1);
}
}
$scope.priceNum();
}
//清空购物车
$scope.deleteAll = function(){
$scope.MyJson = [];
$scope.zs = "总数量是:0";
}
$scope.zs = "";
$scope.zj = "";
$scope.priceNum = function(){
var sl = 0;
var n = 0;
var p = 0;
//做循环获取价格和数量
for(var i = 0;i<$scope.MyJson.length;i++){
var sl = $scope.MyJson[i];
n = n+sl.gnum;
}
$scope.zs = "总数量是:"+n;
}
$scope.priceNum();
//让数量加1
$scope.jia = function(index){
//获取当前的下标
var g = $scope.MyJson[index];
g.gnum = g.gnum+1;
$scope.priceNum();
}
//让数量减1
$scope.jian = function(index,name){
var g = $scope.MyJson[index];
g.gnum = g.gnum-1;
//判断数量 如果== 0 的话 就把这个数据删掉
if(g.gnum == 0){
if(confirm("您确认要删除该商品吗?")){
for(var i = 0;i<$scope.MyJson.length;i++){
if($scope.MyJson[i].gname == name){
$scope.MyJson.splice(i,1);
}
}
}
}
$scope.priceNum();
}
});
</script>
</html>
Angular 基础
最新推荐文章于 2023-05-06 15:15:12 发布