<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=ThirdTest")
.success(function(data){
$scope.goods=data;
})
$scope.qx=function(){
for (i in $scope.goods) {
$scope.goods[i].check=$scope.quanxuan;
}
}
$scope.deleteGoods=function(){
for (var i=0;i<$scope.goods.length;i++) {
if ($scope.goods[i].check==true) {
$scope.goods.splice(i,1);
i--;
}
}
}
$scope.delete=function($index){
if (confirm("确定删除此项吗？")) {
$scope.goods.splice($index);
}
}
})
</script>
<style type="text/css">
.play{
margin-top: 10px;
text-align: center;
}
.plum{
background-color: plum;
}
.pink{
background-color: pink;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h2>商品库存信息管理</h2>
<input ng-model="selname" placeholder="请输入关键字..." ng-model="query"/>
<button style="background: red; margin-left: 450px;" ng-click="deleteGoods()">♥批量删除</button>
<table border="1px" class="play" style="width: 800px;">
<tr style="background-color: gainsboro;">
<td>
<input type="checkbox" ng-model="quanxuan" ng-click="qx()"/>
</td>
<td>商品编号</td>
<td style="color: red;">商品名称</td>
<td>商品价格</td>
<td>商品库存</td>
<td>数据操作</td>
</tr>
<tr ng-repeat="g in goods | filter:query" class="{{$index%2==0?'plum':''pink}}">
<td>
<input type="checkbox" ng-model="g.check" ng-click="itemCheck()"/>
</td>
<td>{{$index+1}}</td>
<td>{{g.name}}</td>
<td>{{g.price|currency:"￥"}}</td>
<td>{{g.number}}</td>
<td>
<button ng-click="delete($index)" style="color: orange;">删除</button>
</td>
</tr>
</table>
</center>
</body>
</html>
