anguler购物车带二级联动

最新推荐文章于 2022-04-13 21:17:34 发布

xiaoxianmao666

最新推荐文章于 2022-04-13 21:17:34 发布

阅读量178

点赞数

本文链接：https://blog.csdn.net/xiaoxianmao666/article/details/79803468

版权

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title></title>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>

<script>

var myApp = angular.module("myApp",[]);
myApp.controller("MyCtra",function($scope,$http){

$scope.list = [
{ "gid": 001, "gname": "手机", "gnum": 3, "gprice": 1000,"address":"北京上地" ,"gcount": 3000,"flag":false },
{ "gid": 002, "gname": "电脑", "gnum": 3, "gprice": 2000,"address":"河南驻马店" ,"gcount": 6000,"flag":false },
{ "gid": 003, "gname": "电视", "gnum": 6, "gprice": 500,"address":"北京西二旗" ,"gcount": 3000,"flag":false }
]

//定义排序变量
$scope.order = "";

//定义改变复选框选中状态的方法
$scope.boxChan = function(index){

if($scope.list[index].flag){
$scope.list[index].flag = false;
}else{
$scope.list[index].flag = true;
}
}

//定义删除的方法
$scope.remove = function(){
var z = false;
if(confirm("确定要删除?")){
for (var i = 0; i < $scope.list.length; i++) {
while(true){
if($scope.list[i].flag){
$scope.list.splice(i,1);
}else{

break;
}
}

}
}
}

//定义清空购物车的方法
$scope.removeAll = function(){
$scope.list = [];
}

//数量改变是调用的方法
$scope.chan = function(index){
if($scope.list[index].gnum <=0){
if(confirm("确定要删除此产品吗？")){
$scope.list.splice(index,1);
}else{
$scope.list[index].gnum = 1;
}
}
}
//添加数量改变的方法
$scope.channum = function(){
if($scope.num == 0){
alert("数量不能为0");
$scope.num = 1;
}
}

//定义一个算出总价的方法
$scope.prices = function(){
price = 0;
for (var i = 0; i < $scope.list.length; i++) {
price += $scope.list[i].gprice * $scope.list[i].gnum;
}
return price;
}

//定义算出总数量的方法
$scope.nums = function(){
num = 0;
for (var i = 0; i < $scope.list.length; i++) {
num += $scope.list[i].gnum;
}
return num;
}

$scope.add = function(){
var name = $scope.newsdata;
var num = parseInt($scope.num);
var price = parseInt($scope.price);

var city = $scope.city;

var c = "";
if(city == 0){
c = "北京";
}else{
c = "河南";
}
var shi = $scope.shi;
var i = $scope.list.length + 1;
$scope.list.push({"gid":i,"gname":name,"gnum":num,"gprice":price,"gcount":price*num,"address":c+shi,"flag":false});

}

$(function(){
var city = 0;
var regions = [["上地","西二旗","朝阳"],["洛阳","驻马店","你猜"]];

//
for(var i = 0; i < regions[city].length; i++){
var op = $("<option></option>");
console.log("---",regions[city][i]);
op.text(regions[city][i]);
$("#shi").append(op);
}

$("#city").change(function(){
city = $(this).val();
$("#shi").empty();
for(var i = 0; i < regions[city].length; i++){
var op = $("<option></option>");
console.log("---",regions[city][i]);
op.text(regions[city][i]);
$("#shi").append(op);
}
});

})

});

</script>

<style type="text/css">
.css1{
background: deepskyblue;
}
.css2{
background: greenyellow;
}

.kuang{
border-radius: 20px;
margin-left: 300px;
margin-bottom: 20px;
}

</style>

</head>
<body ng-controller="MyCtra">
<center>

<h1>我的购物车信息</h1>

<input type="text" ng-model="name" placeholder="根据名称查询" class="kuang"/><br />
<form ng-submit="savedata()" style="width: 30%;margin-bottom: 10px;">
<fieldset>
<legend>添加</legend>
<label>
商品名称<input type="text" id="name" ng-model="newsdata" /><br />
商品数量<input type="number" id="num" ng-model="num"/><br />
商品单价<input type="text" id="price" ng-model="price"/><br />
省<select id="city" ng-model="city">
<option value="0">北京</option>
<option value="1">河南</option>
</select>
市<select id="shi" ng-model="shi">

</select>
<input type="button" value="添加" ng-click="add()"/>
</label>

</fieldset>
</form>

<table border="1 soild #000" cellpadding="1" cellspacing="0" width="50%">
<tr style="background: darkslategray;" align="center">
<td>商品编号<input type="button" ng-click="order = 'gid' " value="∧" style="background: floralwhite;border: 0px;"></td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品单价</td>
<td>价格小计<input type="button" value="∨" ng-click="order = '-gprice*gnum'" style="background: floralwhite;border: 0px;"></td>
<td>商品地址</td>
<td>操作</td>
</tr>
<tr align="center" ng-repeat="li in list|filter:name|orderBy:order " class="{{$even?'css1':'css2'}}">
<td>{{li.gid}}</td>
<td>{{li.gname}}</td>
<td><input type="number" ng-change="chan($index)" ng-model="li.gnum"/></td>
<td>{{li.gprice}}</td>
<td ng-bind="li.gprice * li.gnum"></td>
<td>{{li.address}}</td>
<td><input type="checkbox" ng-click="boxChan($index)"/></td>
</tr>
<tr align="center">
<td colspan="2" style="background: lawngreen;">商品总数:<span ng-bind="nums()"></span></td>
<td style="background: lawngreen;"></td>
<td style="background: lawngreen;">商品总价:<span ng-bind="prices()"></span></td>
<td><input style="background: yellow;border-radius: 10px; border: 0;" type="button" value="清空购物车" ng-click="removeAll()"/></td>
<td><input style="background: yellow;border-radius: 10px; border: 0;" type="button" value="删除" ng-click="remove()"/></td>

</tr>
</table>

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

xiaoxianmao666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
anguler购物车带二级联动

var myApp = angular.module("myApp",[]);myApp.controller("MyCtra",function($scope,$http){$scope.list = [{ "gid": 001, "gname": "手机", "gnum": 3, "gprice": 1000,"address":"北京上地" ,"gcount": 3000,"
复制链接

扫一扫