<!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>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div>
<input type="text" name="" id="" value="" placeholder="输入关键字" ng-model="mohu"/>
<input type="button" name="" id="" value="批量删除" ng-click="plsc()"/>
</div>
<table border="1" cellspacing="0" cellpadding="1">
<tr>
<th><input type="checkbox" name="" id="" value="" ng-model="cb"/></th>
<th>商品名称</th>
<th>
商品价格
<input type="button" name="" id="" value="㊤" ng-click="gao()"/>
<input type="button" name="" id="" value="㊦" ng-click="di()"/>
</th>
<th>
库存
<input type="button" name="" id="" value="㊤" ng-click="gao()"/>
<input type="button" name="" id="" value="㊦" ng-click="di()"/>
</th>
<th>
月销量
<input type="button" name="" id="" value="㊤" ng-click="gao()"/>
<input type="button" name="" id="" value="㊦" ng-click="di()"/>
</th>
<th>购买</th>
</tr>
<tr ng-repeat="x in shops|filter:mohu|orderBy:pai">
<td><input type="checkbox" name="" id="" value="{{x.name}}" ng-model="cb"/></td>
<td>{{x.name}}</td>
<td>{{x.price|currency:"¥"}}</td>
<td>{{x.num}}</td>
<td>{{x.xiao}}</td>
<td><input type="button" name="" id="" value="购买" ng-click="goumai(x.name)"/></td>
</tr>
</table>
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.shops=[{name:"天梭",price:4300,num:300,xiao:1800},
{name:"浪琴",price:3300,num:100,xiao:100},
{name:"梅花",price:2800,num:280,xiao:1000},
{name:"江诗丹顿",price:4500,num:700,xiao:7800},
{name:"阿玛尼",price:9000,num:100,xiao:800}];
//批量删除
$scope.plsc=function(){
var cbs = $("input:checked");
if(cbs.length==0){
alert("请选中数据在删除");
}else{
var a = confirm("确定删除吗");
if(a){
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.gao=function(){
$scope.pai="price";
}
$scope.di=function(){
$scope.pai="-price";
}
//商品库存排序
$scope.gao=function(){
$scope.pai="num";
}
$scope.di=function(){
$scope.pai="-num";
}
//商品销量排序
$scope.gao=function(){
$scope.pai="xiao";
}
$scope.di=function(){
$scope.pai="-xiao";
}
//购买
$scope.goumai=function(name){
for (var i = 0; i < $scope.shops.length; i++) {
if( $scope.shops[i].name==name){
$scope.shops[i].num--;
$scope.shops[i].xiao++;
break;
}
}
}
})
</script>
</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>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div>
<input type="text" name="" id="" value="" placeholder="输入关键字" ng-model="mohu"/>
<input type="button" name="" id="" value="批量删除" ng-click="plsc()"/>
</div>
<table border="1" cellspacing="0" cellpadding="1">
<tr>
<th><input type="checkbox" name="" id="" value="" ng-model="cb"/></th>
<th>商品名称</th>
<th>
商品价格
<input type="button" name="" id="" value="㊤" ng-click="gao()"/>
<input type="button" name="" id="" value="㊦" ng-click="di()"/>
</th>
<th>
库存
<input type="button" name="" id="" value="㊤" ng-click="gao()"/>
<input type="button" name="" id="" value="㊦" ng-click="di()"/>
</th>
<th>
月销量
<input type="button" name="" id="" value="㊤" ng-click="gao()"/>
<input type="button" name="" id="" value="㊦" ng-click="di()"/>
</th>
<th>购买</th>
</tr>
<tr ng-repeat="x in shops|filter:mohu|orderBy:pai">
<td><input type="checkbox" name="" id="" value="{{x.name}}" ng-model="cb"/></td>
<td>{{x.name}}</td>
<td>{{x.price|currency:"¥"}}</td>
<td>{{x.num}}</td>
<td>{{x.xiao}}</td>
<td><input type="button" name="" id="" value="购买" ng-click="goumai(x.name)"/></td>
</tr>
</table>
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.shops=[{name:"天梭",price:4300,num:300,xiao:1800},
{name:"浪琴",price:3300,num:100,xiao:100},
{name:"梅花",price:2800,num:280,xiao:1000},
{name:"江诗丹顿",price:4500,num:700,xiao:7800},
{name:"阿玛尼",price:9000,num:100,xiao:800}];
//批量删除
$scope.plsc=function(){
var cbs = $("input:checked");
if(cbs.length==0){
alert("请选中数据在删除");
}else{
var a = confirm("确定删除吗");
if(a){
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.gao=function(){
$scope.pai="price";
}
$scope.di=function(){
$scope.pai="-price";
}
//商品库存排序
$scope.gao=function(){
$scope.pai="num";
}
$scope.di=function(){
$scope.pai="-num";
}
//商品销量排序
$scope.gao=function(){
$scope.pai="xiao";
}
$scope.di=function(){
$scope.pai="-xiao";
}
//购买
$scope.goumai=function(name){
for (var i = 0; i < $scope.shops.length; i++) {
if( $scope.shops[i].name==name){
$scope.shops[i].num--;
$scope.shops[i].xiao++;
break;
}
}
}
})
</script>
</body>
</html>