<!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-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
tr:nth-child(odd){
background-color: aqua;
}
</style>
<script type="text/javascript">
angular.module("myApp",[]).controller("myCtrl",function($scope,$http){
$http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=monthTest").then(function(success){
$scope.goods=success.data;
})
$scope.buy=function(index){
if($scope.goods[index].number==0){
alert("库存不足")
}else{
$scope.goods[index].number--;
$scope.goods[index].sells++;
}
}
$scope.select=function(){
$scope.selName=$scope.selectName
}
$scope.change=function(){
var sk=$scope.ischecks;
for (var i = 0; i < $scope.goods.length; i++) {
$scope.goods[i].checked=sk;
}
}
$scope.delAll=function(){
x=0;
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked==true){
x++;
}
}
if(x==0){
alert("请选择要删除的商品")
}else if(confirm("您确认要删除这些数据吗")){
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked==true){
$scope.goods.splice(i,1);
i--;
}
}
$scope.ischecks=false;
}
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="请输入关键字" ng-model="selectName"/>
<input type="button" value="搜索" ng-click="select()"/>
<button ng-click="delAll()">批量删除</button>
<table width="600px" border="1px solid">
<tr style="background-color: lightblue;">
<th><input type="checkbox" ng-model="ischecks" ng-change="change()"/> </th>
<th>商品名称</th>
<th>商品价格<button ng-click="px='price';sj=!sj">^</button> </th>
<th>库存<button ng-click="px='number';sj=!sj">^</button> </th>
<th>月销量<button ng-click="px='sells';sj=!sj">^</button> </th>
<th>购买</th>
</tr>
<tr ng-repeat="s in goods|filter:selName|orderBy:px:sj">
<th><input type="checkbox" ng-model="s.checked" /> </th>
<th>{{s.name}}</th>
<th>{{s.price|currency:"¥"}}</th>
<th>{{s.number}}</th>
<th>{{s.sells}}</th>
<th><button ng-click="buy($index)">购买</button> </th>
</tr>
</table>
<button>上一页</button> <button>下一页</button>
</body>
</html>
angular js 3
最新推荐文章于 2022-06-21 17:12:47 发布