<!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-3.2.1.min.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.name;
var num = parseInt($scope.num);
var price = parseInt($scope.price);
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" style="background: palevioletred;"/><br />
<form ng-submit="" style="width: 30%;margin-bottom: 10px;">
<fieldset>
<legend>添加</legend>
<label>
商品名称<input type="text" id="name" ng-model="name" /><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: palevioletred;" 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>
</table>
<br />
<table width="50%" >
<tr style="background: greenyellow;text-align: center;">
<td>商品总数:<span ng-bind="nums()"></span></td>
<td>商品总价:<span ng-bind="prices()"></span></td>
<td><input style="background: palevioletred;border-radius: 10px; border: 0;" type="button" value="清空购物车" ng-click="removeAll()"/></td>
<td><input style="background: palevioletred;border-radius: 10px; border: 0;" type="button" value="删除" ng-click="remove()"/></td>
</tr>
</table>
</center>
</body>
</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-3.2.1.min.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.name;
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" style="background: palevioletred;"/><br />
<form ng-submit="" style="width: 30%;margin-bottom: 10px;">
<fieldset>
<legend>添加</legend>
<label>
商品名称<input type="text" id="name" ng-model="name" /><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: palevioletred;" 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>
</table>
<br />
<table width="50%" >
<tr style="background: greenyellow;text-align: center;">
<td>商品总数:<span ng-bind="nums()"></span></td>
<td>商品总价:<span ng-bind="prices()"></span></td>
<td><input style="background: palevioletred;border-radius: 10px; border: 0;" type="button" value="清空购物车" ng-click="removeAll()"/></td>
<td><input style="background: palevioletred;border-radius: 10px; border: 0;" type="button" value="删除" ng-click="remove()"/></td>
</tr>
</table>
</center>
</body>
</html>