<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style> | |
.a1{ | |
width: 600px; | |
} | |
tr:nth-child(odd){ | |
background-color: white; | |
} | |
tr:nth-child(even){ | |
background-color: darkgray; | |
} | |
</style> | |
</head> | |
<script type="text/javascript" src="js/angular.min.js" ></script> | |
<script> | |
var app=angular.module("myapp",[]).controller("myctrl",function($scope,$http){ | |
//修改 | |
$scope.xs=false; | |
$scope.xg= function(index){ | |
$scope.xs=true; | |
idx=index; | |
$scope.gname_1=$scope.goods[index].gname; | |
$scope.price_1=$scope.goods[index].price; | |
$scope.num_1=$scope.goods[index].num; | |
$scope.address_1=$scope.goods[index].address; | |
} | |
$scope.upd = function(){ | |
$scope.goods[idx].gname=$scope.gname_1; | |
$scope.goods[idx].price=$scope.price_1; | |
$scope.goods[idx].num=$scope.num_1; | |
$scope.goods[idx].address=$scope.address_1; | |
} | |
$scope.xs=false; | |
//全选 | |
$scope.qx1 = function(){ | |
var ck=$scope.qx; | |
for (var i = 0; i < $scope.goods.length; i++) { | |
$scope.goods[i].checked=ck; | |
} | |
} | |
//删除 | |
$scope.del = function(index){ | |
$scope.goods.splice(index,1); | |
} | |
//批量删除 | |
$scope.plsc=function(){ | |
var d=false; | |
for (var i = 0; i < $scope.goods.length; i++) { | |
if($scope.goods[i].checked==true){ | |
d=true; | |
} | |
} | |
if(d){ | |
for (var i = 0; i < $scope.goods.length; i++) { | |
if($scope.goods[i].checked==true) | |
{ | |
$scope.goods.splice(i,1); | |
i--; | |
} | |
} | |
}else{ | |
alert("请选择数据"); | |
} | |
} | |
//添加 | |
$scope.tj= function(){ | |
var good = {}; | |
if($scope.gname==null ||$scope.gname==""){ | |
$scope.showName=true; | |
return; | |
}else{ | |
var gname=$scope.gname; | |
$scope.showName=false; | |
} | |
if($scope.price<=0||$scope.price==null) | |
{ | |
$scope.showPrice=true; | |
return; | |
}else{ | |
var price=$scope.price; | |
$scope.showPrice=false; | |
} | |
if($scope.num<=0||$scope.num==null){ | |
$scope.showNum=true; | |
return; | |
}else{ | |
var num=$scope.num; | |
$scope.showNum=false; | |
} | |
if($scope.address==""||$scope.address==null){ | |
$scope.showAddress=true; | |
return; | |
}else{ | |
var address=$scope.address; | |
$scope.showAddress=false; | |
} | |
$scope.goods.push({ | |
gname:gname, | |
price:price, | |
num:num, | |
address:address | |
}) | |
$scope.flag=false; | |
} | |
//排序 | |
$scope.px=["请选择","按名称正序","按名称倒序","按价格正序","按价格倒序"] | |
$scope.xz=function(){ | |
var value=$scope.xzname; | |
switch (value){ | |
case "按名称正序": | |
$scope.goods.sort(function(a,b){ | |
return a.gname-b.gname; | |
}) | |
break; | |
case "按名称倒序": | |
$scope.goods.sort(function(a,b){ | |
return b.gname-a.gname; | |
}) | |
break; | |
case "按价格正序": | |
$scope.goods.sort(function(a,b){ | |
return a.price-b.price; | |
}) | |
break; | |
case "按价格倒序": | |
$scope.goods.sort(function(a,b){ | |
return b.price-a.price; | |
}) | |
break; | |
default: | |
break; | |
} | |
} | |
$http.get("goods.json").then(function(success){ | |
$scope.goods=success.data; | |
}) | |
}) | |
</script> | |
<body ng-app="myapp" ng-controller="myctrl"> | |
<table cellpadding="0" cellspacing="0" border="1px" class="a1"> | |
<input type="text" ng-model="data" placeholder="请输入关键字"/> | |
<select ng-model="xzname" ng-init="xzname=px[0]" ng-change="xz()" ng-options="s for s in px">{{s}}</select> | |
<input type="button" ng-click="flag=true" value="添加"/> | |
<input type="button" ng-click="plsc()" value="批量删除" /> | |
<tr> | |
<td><input type="checkbox" ng-model="qx" ng-change="qx1()"/></td> | |
<td>名称</td> | |
<td>价格</td> | |
<td>数量</td> | |
<td>总计</td> | |
<td>地址</td> | |
<td>操作</td> | |
</tr> | |
<tr ng-repeat="s in goods | filter:{gname:data}"> | |
<td><input type="checkbox" ng-model="s.checked"/></td> | |
<td>{{s.gname}}</td> | |
<td>{{s.price}}</td> | |
<td> | |
<button ng-click="s.num=s.num+1">+</button> | |
<input type="text" value="{{s.num}}"/> | |
<button ng-click="s.num=s.num-1">-</button> | |
</td> | |
<td>{{s.num*s.price}}</td> | |
<td>{{s.address}}</td> | |
<td> | |
<button ng-click="del($index)">删除</button> | |
<button ng-click="xg($index)">修改</button> | |
</td> | |
</tr> | |
</table> | |
<form ng-show="flag"> | |
名称<input type="text" ng-model="gname"/><span ng-show="showName">请输入正确名称</span><br /> | |
价格<input type="text" ng-model="price"/><span ng-show="showPrice">请输入正确单价</span><br /> | |
数量<input type="text" ng-model="num"/><span ng-show="showNum">请输入正确数量</span><br /> | |
地址<input type="text" ng-model="address"/><span ng-show="showAddress">请输入正确地址</span><br /> | |
<input type="button" ng-click="tj()" value="添加"/> | |
</form> | |
<form ng-show="xs"> | |
名称<input type="text" ng-model="gname_1"/><br /> | |
价格<input type="text" ng-model="price_1"/><br /> | |
数量<input type="text" ng-model="num_1"/><br /> | |
地址<input type="text" ng-model="address_1"/><br /> | |
<input type="button" ng-click="upd()" value="修改"/> | |
</form> | |
</body> | |
</html> | |
试题二
最新推荐文章于 2022-11-17 08:49:58 发布