大白兔3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<title></title>
<style type="text/css">
.a{
background-color: #DCDCDC;
}
.b{
background-color: white;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<div style="width: 30%;">
<input type="text" placeholder="输入框" ng-model="cha" class="left"/>
<input type="button" id="" value="批量删除" ng-click="plsc()" class="right"/>
</div>
<table border="1" cellspacing="0" cellpadding="1" ng-show="showTable" style="width: 50%;">
<tr style="background-color: gray;">
<th><input type="checkbox" ng-model="All" /></th>
<th>商品名称</th>
<th>
商品价格
<input type="button" id="" value="^" ng-click="paiprice()"/>
</th>
<th>
库存
<input type="button" id="" value="^" ng-click="painum()"/>
</th>
<th>
月销量
<input type="button" id="" value="^" ng-click="paisales()"/>
</th>
<th>购买</th>
</tr>
<tr ng-repeat="x in shops|filter:{name:cha}|orderBy:px" class="{{$index%2==0?'a':'b'}}">
<td><input type="checkbox" ng-model="All" value="{{x.name}}"/></td>
<td>{{x.name}}</td>
<td>{{x.price|currency:"￥"}}</td>
<td>{{x.num}}</td>
<td>{{x.sales}}</td>
<td>
<input type="button" id="" value="购买" ng-click="buy(x.name)"/>
</td>
</tr>
</table>
</center>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){

$scope.showTable=true;

var price=true;
var num=true;
var sales=true;

$scope.shops=[{name:"天梭",price:4300,num:300,sales:1800},{name:"浪琴",price:2800,num:3020,sales:4500},{name:"美度",price:3500,num:3300,sales:400},{name:"梅花",price:3000,num:300,sales:600},{name:"劳力士",price:8000,num:300,sales:1000}];

$scope.plsc=function(){
var cbs=$("input:checked");
if (cbs.length==0) {
alert("请先选择");
}else{
var b=confirm("确定删除吗？");
if (b) {
cbs.each(function(){
for (var i = 0; i < $scope.shops.length; i++) {
if ($(this).val()==$scope.shops[i].name) {
$scope.shops.splice(i,1);
break;
}
}
});
}
if ($scope.shops.length==0) {
$scope.showTable=false;
}
}
}

$scope.paiprice=function(){
if (price) {
$scope.px="price";
price=false;
}else{
$scope.px="-price";
price=true;
}
}
$scope.painum=function(){
if (num) {
$scope.px="num";
num=false;
}else{
$scope.px="-num";
num=true;
}
}
$scope.paisales=function(){
if (sales) {
$scope.px="sales";
sales=false;
}else{
$scope.px="-sales";
sales=true;
}
}
$scope.buy=function(name){
for (var i = 0; i < $scope.shops.length; i++) {
if ($scope.shops[i].name==name) {
$scope.shops[i].num--;
$scope.shops[i].sales++;
break;
}
}
}
});
</script>
</body>
</html>

猜你喜欢