<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
table tr:nth-child(even){background-color: pink;}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<div>
<input type="text" name="" id="" value="" placeholder="输入商品名" ng-model="mohu"/>
<select name="" ng-model="order">
<option value="gprice">按单价正序排序</option>
<option value="-gprice">按单价倒序排序</option>
</select>
<input type="button" name="" id="" value="添加" ng-click="addshow=!addshow"/>
</div>
<div ng-show="addshow">
<ul style="list-style: none;">
<li>
商品名称:<input type="text" name="" id="" value="" ng-model="aname"/>
</li>
<li>
商品数量:<input type="text" name="" id="" value="" ng-model="anum"/>
</li>
<li>
商品单价:<input type="text" name="" id="" value="" ng-model="aprice"/>
</li>
<li>
<input type="button" name="" id="" value="添加" ng-click="add()"/>
</li>
</ul>
</div>
<table border="1" cellspacing="0" cellpadding="1">
<tr>
<th>商品名</th>
<th>商品数量</th>
<th>商品单价</th>
<th>商品总价</th>
<th>删除</th>
</tr>
<tr ng-repeat="x in shops|filter:mohu|orderBy:order">
<td>{{x.gname}}</td>
<td>
{{x.gnum}}
<input type="button" name="" id="" value="㊤" ng-click="jia(x.gid)"/>
<input type="button" name="" id="" value="㊦" ng-click="jian(x.gid)"/>
</td>
<td>{{x.gprice}}</td>
<td>{{x.gprice*x.gnum}}</td>
<td>
<input type="button" name="" id="" value="删除" ng-click="del(x.name)"/>
</td>
</tr>
</table>
<input type="button" name="" id="" value="清空购物车" ng-click="alldel()"/>
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.addshow=false;
$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(name){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].name==name){
$scope.shops.splice(i,1);
break;
}
}
}
//加
$scope.jia=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].gid==id){
$scope.shops[i].gnum++;
}
}
}
//减
$scope.jian=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].gnum<1){
$scope.shops.splice(i,1);break;
}
if($scope.shops[i].gid==id){
$scope.shops[i].gnum--;
}
}
}
//清空列表
$scope.alldel=function(){
if(confirm("确定吗")){
$scope.shops=[];
}
}
//添加
$scope.add=function(){
var newshow={};
newshow.gname=$scope.aname;
newshow.gprice=$scope.aprice;
newshow.gnum=$scope.anum;
$scope.shops.push(newshow);
}
});
</script>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
table tr:nth-child(even){background-color: pink;}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<div>
<input type="text" name="" id="" value="" placeholder="输入商品名" ng-model="mohu"/>
<select name="" ng-model="order">
<option value="gprice">按单价正序排序</option>
<option value="-gprice">按单价倒序排序</option>
</select>
<input type="button" name="" id="" value="添加" ng-click="addshow=!addshow"/>
</div>
<div ng-show="addshow">
<ul style="list-style: none;">
<li>
商品名称:<input type="text" name="" id="" value="" ng-model="aname"/>
</li>
<li>
商品数量:<input type="text" name="" id="" value="" ng-model="anum"/>
</li>
<li>
商品单价:<input type="text" name="" id="" value="" ng-model="aprice"/>
</li>
<li>
<input type="button" name="" id="" value="添加" ng-click="add()"/>
</li>
</ul>
</div>
<table border="1" cellspacing="0" cellpadding="1">
<tr>
<th>商品名</th>
<th>商品数量</th>
<th>商品单价</th>
<th>商品总价</th>
<th>删除</th>
</tr>
<tr ng-repeat="x in shops|filter:mohu|orderBy:order">
<td>{{x.gname}}</td>
<td>
{{x.gnum}}
<input type="button" name="" id="" value="㊤" ng-click="jia(x.gid)"/>
<input type="button" name="" id="" value="㊦" ng-click="jian(x.gid)"/>
</td>
<td>{{x.gprice}}</td>
<td>{{x.gprice*x.gnum}}</td>
<td>
<input type="button" name="" id="" value="删除" ng-click="del(x.name)"/>
</td>
</tr>
</table>
<input type="button" name="" id="" value="清空购物车" ng-click="alldel()"/>
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.addshow=false;
$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(name){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].name==name){
$scope.shops.splice(i,1);
break;
}
}
}
//加
$scope.jia=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].gid==id){
$scope.shops[i].gnum++;
}
}
}
//减
$scope.jian=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].gnum<1){
$scope.shops.splice(i,1);break;
}
if($scope.shops[i].gid==id){
$scope.shops[i].gnum--;
}
}
}
//清空列表
$scope.alldel=function(){
if(confirm("确定吗")){
$scope.shops=[];
}
}
//添加
$scope.add=function(){
var newshow={};
newshow.gname=$scope.aname;
newshow.gprice=$scope.aprice;
newshow.gnum=$scope.anum;
$scope.shops.push(newshow);
}
});
</script>
</center>
</body>
</html>