<!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">
.whiteline{
background-color: gainsboro;
}
.grayline{
background-color: white;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<input type="" placeholder="请输入关键字" ng-model="keyy" />
<input type="button" value="批量删除" ng-click="plsc()" style="background-color: orangered;" />
<br /><br />
<table border="1" cellpadding="1" cellspacing="1" style="width: 39%;">
<tr style="background-color: gray;">
<th><input type="checkbox" ng-model="qll"></th>
<th>商品名称</th>
<th>商品价格
<input type="button" value="^" ng-click="jia()" />
<input type="button" value="∨" ng-click="ge()" />
</th>
<th>库存
<input type="button" value="^" ng-click="ku()" />
<input type="button" value="∨" ng-click="cun()" />
</th>
<th>月销量
<input type="button" value="^" ng-click="xiao()" />
<input type="button" value="∨" ng-click="liang()" />
</th>
</th>
<th>购买</th>
</tr>
<tr ng-repeat="x in shops|filter:keyy|orderBy:pai" class="{{$index%2==0?'whiteline':'grayline'}}" style="text-align: center;">
<td><input type="checkbox" value="{{x.name}}" ng-model="qll"></td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td>{{x.count}}</td>
<td>{{x.xiao}}</td>
<td><input type="button" value="购买" ng-click="mai(x.name)" style="background-color: green; border-radius: 8px;"></td>
</tr>
</table>
</center>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.shops=[{name:"天梭",price:4300,count:2,xiao:1800},{name:"美琴",price:2800,count:5,xiao:4500},{name:"美度",price:2500,count:280,xiao:400},{name:"梅花",price:3000,count:100,xiao:600},{name:"劳力士",price:8000,count:300,xiao:1000}]
$scope.plsc=function(){
var cbs=$("input:checked");
cbs.each(function(){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].name==$(this).val()){
$scope.shops.splice(i,1);break;
}
}
});
}
//库存
$scope.ku=function(){
$scope.pai="count";
}
$scope.cun=function(){
$scope.pai="-count";
}
//销量
$scope.xiao=function(){
$scope.pai="xiao";
}
$scope.liang=function(){
$scope.pai="-xiao";
}
//价格
$scope.jia=function(){
$scope.pai="price";
}
$scope.ge=function(){
$scope.pai="-price";
}
//购买
// $scope.mai=function(aaa){
// for (var i = 0; i < $scope.shops.length; i++) {
// if($scope.shops[i].name==aaa){
// $scope.shops[i].count--;
// $scope.shops[i].xiao++;
// }
// }
//
//
// }
$scope.mai=function(aa){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].name==aa){
if($scope.shops[i].count<1){
alert("库存不够!");
break;
}
$scope.shops[i].count--;
$scope.shops[i].xiao++;
}
}
}
})
</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">
.whiteline{
background-color: gainsboro;
}
.grayline{
background-color: white;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<input type="" placeholder="请输入关键字" ng-model="keyy" />
<input type="button" value="批量删除" ng-click="plsc()" style="background-color: orangered;" />
<br /><br />
<table border="1" cellpadding="1" cellspacing="1" style="width: 39%;">
<tr style="background-color: gray;">
<th><input type="checkbox" ng-model="qll"></th>
<th>商品名称</th>
<th>商品价格
<input type="button" value="^" ng-click="jia()" />
<input type="button" value="∨" ng-click="ge()" />
</th>
<th>库存
<input type="button" value="^" ng-click="ku()" />
<input type="button" value="∨" ng-click="cun()" />
</th>
<th>月销量
<input type="button" value="^" ng-click="xiao()" />
<input type="button" value="∨" ng-click="liang()" />
</th>
</th>
<th>购买</th>
</tr>
<tr ng-repeat="x in shops|filter:keyy|orderBy:pai" class="{{$index%2==0?'whiteline':'grayline'}}" style="text-align: center;">
<td><input type="checkbox" value="{{x.name}}" ng-model="qll"></td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td>{{x.count}}</td>
<td>{{x.xiao}}</td>
<td><input type="button" value="购买" ng-click="mai(x.name)" style="background-color: green; border-radius: 8px;"></td>
</tr>
</table>
</center>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.shops=[{name:"天梭",price:4300,count:2,xiao:1800},{name:"美琴",price:2800,count:5,xiao:4500},{name:"美度",price:2500,count:280,xiao:400},{name:"梅花",price:3000,count:100,xiao:600},{name:"劳力士",price:8000,count:300,xiao:1000}]
$scope.plsc=function(){
var cbs=$("input:checked");
cbs.each(function(){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].name==$(this).val()){
$scope.shops.splice(i,1);break;
}
}
});
}
//库存
$scope.ku=function(){
$scope.pai="count";
}
$scope.cun=function(){
$scope.pai="-count";
}
//销量
$scope.xiao=function(){
$scope.pai="xiao";
}
$scope.liang=function(){
$scope.pai="-xiao";
}
//价格
$scope.jia=function(){
$scope.pai="price";
}
$scope.ge=function(){
$scope.pai="-price";
}
//购买
// $scope.mai=function(aaa){
// for (var i = 0; i < $scope.shops.length; i++) {
// if($scope.shops[i].name==aaa){
// $scope.shops[i].count--;
// $scope.shops[i].xiao++;
// }
// }
//
//
// }
$scope.mai=function(aa){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].name==aa){
if($scope.shops[i].count<1){
alert("库存不够!");
break;
}
$scope.shops[i].count--;
$scope.shops[i].xiao++;
}
}
}
})
</script>
</body>
</html>