<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.goods = [
{"id":"201","name":"MacPro","price":10000,"brand":"蒙牛","sl":5,"xj":50000},
{"id":"202","name":"iPhoneX","price":8000,"brand":"老北京","sl":5,"xj":40000},
{"id":"203","name":"小米7","price":4999,"brand":"麒麟","sl":5,"xj":24995},
{"id":"204","name":"华为P10","price":2999,"brand":"百事","sl":5,"xj":14995}];
/* var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){//注入$http对象
$scope.jsonStr;
//请求本地的json文件
$http({
method:"get",
url:"haha.json"
}).then(function success(response){
$scope.jsonStr = response.data;
},function error(response){
$scope.jsonStr = "失败";
});
//请求互联网数据
$scope.jsonFromNet;
$http({
method:"get",
url:"http://gank.io/api/data/Android/10/1"
}).then(function success(response){
$scope.jsonFromNet = response.data;
},function error(response){
});
});
*/
//过滤条件
$scope.searchKey;
//排序条件
$scope.mycolor1='td2';
$scope.orderByKey;
$scope.orderData1 = function(_this){
$scope.mycolor1='td1';
//把其他所有的td的背景改为白色
$scope.mycolor0="td2";
//判断排序字段
if($scope.orderByKey!="price" && $scope.orderByKey!="-price"){
$scope.orderByKey = "price";
}else{
debugger;
if($scope.orderByKey=="price"){
$scope.orderByKey = "-price";
}else{
$scope.orderByKey = "price";
}
}
}
$scope.mycolor0='td2';
$scope.orderData0 = function(_this){
$scope.mycolor0='td1';
//把上一个td的背景改为白色
$scope.mycolor1="td2";
//判断排序字段
if($scope.orderByKey!="name" && $scope.orderByKey!="-name"){
$scope.orderByKey = "name";
}else{
debugger;
if($scope.orderByKey=="name"){
$scope.orderByKey = "-name";
}else{
$scope.orderByKey = "name";
}
}
}
//通过id删除，没有任何bug
/* $scope.deletGoodsById = function(_id){
//得到_id在数据源中的索引号
//循环遍历得到每一个商品，用它的id和_id比较
for(var i=0;i<$scope.goods.length;i++){
var g = $scope.goods[i];//得到一个商品
if(g.id == _id){//此g就是要删除的，，删除之
$scope.goods.splice(i,1);
break;
}
}
};*/
$scope.deletGoodsById=function(_id){
if(confirm("您确认删除吗?")){
for (g in $scope.goods) {
if($scope.goods[g].id==_id){
$scope.goods.splice(g,1)
}
}
}
};
//全选的属性
$scope.checkall = false;
//添加功能区域
$scope.addIsShow = false;
$scope.newname;
$scope.newprice;
$scope.newbrand;
$scope.newsl;
$scope.addNewGood = function(){
var n = Math.round(Math.random()*100);//随机数作为id
//创建新商品对象,属性赋值
var a = {};
a.id = n;
a.name = $scope.newname;
a.price = $scope.newprice;
a.brand = $scope.newbrand;
a.sl= $scope.newsl;
a.xj=$scope.newsl*$scope.newprice;
//添加到数组
$scope.goods.push(a);
$scope.addIsShow = false;//设置隐藏
}
//修改
$scope.updateGood;
$scope.updateIsShow = false;//修改区域默认不显示
$scope.updatename;
$scope.updateprice;
$scope.updatebrand;
$scope.updatesl;
$scope.showGoodById = function(_id){
$scope.updateIsShow = true;//显示修改区域
//回显修改商品的信息，，先通过遍历数据源，找到要修改的商品对象
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].id==_id){//找到了要修改的商品信息
$scope.updateGood = $scope.goods[i];//收集修改对象
break;
}
}
//找到要修改的对象后，显示在页面中，数据绑定
$scope.updatename=$scope.updateGood.name;
$scope.updateprice=$scope.updateGood.price;
$scope.updatebrand=$scope.updateGood.brand;
$scope.updatesl= $scope.updateGood.sl
}
//提交修改信息到数据源
$scope.updateGoodF = function(){
$scope.updateIsShow = false;//隐藏修改区域
$scope.updateGood.name = $scope.updatename;
$scope.updateGood.price = $scope.updateprice;
$scope.updateGood.brand = $scope.updatebrand;
$scope.updateGood.sl= $scope.updatesl;
}
/*//批量删除
$scope.deleteMore = function(){
//获取所有选择的checkbox
var cks = $("input[type=checkbox]:checked");
for(var i=0;i<cks.length;i++){
var ck = cks[i];
var _id = ck.value;//得到要删除的商品的id
for(var j=0;j<$scope.goods.length;j++){//到数据源中找到和当前id匹配的商品，删除之
if($scope.goods[j].id == _id){
$scope.goods.splice(j,1);
break;
}
}
}
}*/
$scope.deleteMore=function(){
var arr = $(":checkbox:checked")
if(arr.length>0){
if(confirm("您确定要删除吗?")){
arr.each(function(){
var _id = $(this).prop("title");
for (g in $scope.goods) {
if($scope.goods[g].id==_id){
$scope.goods.splice(g,1)
}
}
})
}
}else{
alert("请您勾选数据!")
}
}
$scope.counts=function(){
var a=0;
for (var i=0;i<$scope.goods.length;i++) {
a+=$scope.goods[i].sl*1;
}
return a;
}
$scope.prices=function(){
var a=0;
for (var i=0;i<$scope.goods.length;i++) {
a+=$scope.goods[i].sl*$scope.goods[i].price;
}
return a;
}
})
</script>
<style type="text/css">
table{
text-align: center;
}
.red{
background-color:beige;
}
.green{
background-color: greenyellow;
}
</style>
<style type="text/css">
.td1{
background-color: yellow;
}
.td2{
background-color: null;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
查询：<input type="text" ng-model="searchKey" />
排序条件:<select ng-model="orderByKey">
<option value="">--请选择--</option>
<option value="name">--按名字正序--</option>
<option value="-name">--按名字倒序--</option>
<option value="price">--按价钱正序--</option>
<option value="-price">--按价钱倒序--</option>
<option value="id">--按id正序--</option>
<option value="-id">--按id倒序--</option>
</select>
<br /><br />
<div ng-show="addIsShow">
名字：<input type="text" ng-model="newname" /><br />
价钱：<input type="text" ng-model="newprice" /><br />
产地：<input type="text" ng-model="newbrand" /><br />
数量：<input type="text" ng-model="newsl" /><br />
<input type="button" value="添加" ng-click="addNewGood();" /><br />
</div>
<input type="button" value="入库" ng-click="addIsShow=true"/>
<input style="text-align: right;" type="button" value="批量删除" ng-click="deleteMore();"/>
商品总数:{{counts()}} 商品总价:{{prices()}}
<table width="400px" border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px" >
<tr style="background-color: grey;">
<td><input type="checkbox" ng-model="checkall"/></td>
<td>序号</td>
<td>id</td>
<td ng-class="mycolor0" ng-click="orderData0(this);">商品名称</td>
<td ng-class="mycolor1" ng-click="orderData1(this);">商品价格</td>
<td>品牌</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in goods | filter:searchKey | orderBy:orderByKey" class="{{$index%2==0?'red':'green'}}">
<td><input type="checkbox" value="{{g.id}}" ng-model="checkall" title="{{g.id}}" /></td>
<td>{{$index+1}}</td>
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.brand}}</td>
<td>{{g.sl}}</td>
<td>{{g.xj}}</td>
<td>
<input type="button" value="删除" ng-click="deletGoodsById(g.id);"/>
<input type="button" value="修改" ng-click="showGoodById(g.id);"/>
</td>
</tr>
</table>
<div ng-show="updateIsShow">
名字：<input type="text" ng-model="updatename" /><br />
价钱：<input type="text" ng-model="updateprice" /><br />
产地：<input type="text" ng-model="updatebrand" /><br />
数量：<input type="text" ng-model="updatesl" /><br />
<input type="button" value="提交修改" ng-click="updateGoodF();" /><br />
</div>
</body>
</html>
1494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
