angular js 3

<!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>
猜你喜欢
