大白兔1

<!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-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.yellowline{
background-color: yellow;
}
.redline{
background-color: red;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<div>
查询:
<input type="text" id="" value="" placeholder="请输入查询关键字" ng-model="searchKey"/>
排序：
<select name="" ng-model="orderbyKey">
<option value="0">--请选择--</option>
<option value="name">--名称正序--</option>
<option value="-name">--名称倒序--</option>
<option value="price">--价格正序--</option>
<option value="-price">--价格倒序--</option>
</select>
<input type="button" id="" value="入库/增加" ng-click="showAdd=!showAdd" />

</div>

<div ng-show="showAdd">
<ul style="list-style: none;">
<li>商品编号：
<input type="text" name="" id="" value="" ng-model="asid" />

</li>
<li>商品名称：
<input type="text" name="" id="" value="" ng-model="aname" />

</li>
<li>商品价格：
<input type="text" name="" id="" value="" ng-model="aprice" />

</li><li>商品产地：
<input type="text" name="" id="" value="" ng-model="aproduct" />

</li>
<li>
<input type="button" id="" value="添加" ng-click="addShop()" />

</li>
</ul>

</div>

<div>
<input type="button" id="" value="批量删除" ng-click="delMore()" />
</div>
<table border="1" cellspacing="0" cellpadding="1" width="50%" style="text-align: center;" ng-show="isShowTable">
<tr style="background-color: gray;">
<th><input type="checkbox" name="" id="" value="" ng-model="checkAll"/></th>
<th>序号</th>
<th>id</th>
<th>商品名称</th>
<th>价格</th>
<th>产地</th>
<th>操作</th>
</tr>

<tr ng-repeat="x in shops|filter:searchKey|orderBy:orderbyKey" class="{{$index%2==0?'redline':'yellowline'}}">
<td><input type="checkbox" name="" id="" value="{{x.sid}}" ng-model="checkAll" /></td>
<td>{{$index}}</td>
<td>{{x.sid}}</td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td>{{x.product}}</td>
<td>
<input type="button" id="" value="删除" ng-click="del(x.sid)" />
<input type="button" id="" value="修改" ng-click="modify(x.sid)"/>

</td>

</tr>
</table>

<div ng-show="showModify">
<ul style="list-style: none;">

<li>商品名称：
<input type="text" name="" id="" value="" ng-model="mname" />

</li>
<li>商品价格：
<input type="text" name="" id="" value="" ng-model="mprice" />

</li><li>商品产地：
<input type="text" name="" id="" value="" ng-model="mproduct" />

</li>
<li>
<input type="button" id="" value="修改" ng-click="modifyShop()" />

</li>
</ul>

</div>

</center>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
//初使化是 “请选择”
$scope.orderbyKey="0";
//是否隐藏列表
$scope.isShowTable=true;

//是否隐藏添加布局
$scope.showAdd=false;

//是否隐藏修改布局
$scope.showModify=false;

//初使化列表数据
$scope.shops=[{sid:"001",name:"小米",price:3400,product:"北京"},{sid:"002",name:"华为",price:5400,product:"上海"},{sid:"003",name:"vivo",price:8000,product:"北京"},{sid:"004",name:"oppo",price:2300,product:"北京"}];

//定义删除方法
$scope.del=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].sid==id){//根据sid这个字段进行判断
$scope.shops.splice(i,1);
break;
}
}

if($scope.shops.length==0){
//隐藏列表
$scope.isShowTable=false;
}

}
//定义批量删除的方法
$scope.delMore=function(){
//得到选中的checkbox
var cbs=$("input:checked");
cbs.each(function(){
// alert($(this).val());
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].sid==$(this).val()){
$scope.shops.splice(i,1);
break;
}
}

});

if($scope.shops.length==0){
//隐藏列表
$scope.isShowTable=false;
}

}

//显示或隐藏添加布局
// $scope.isShowAdd=function(){
// if($scope.showAdd==true){
// $scope.showAdd=false;
// }else{
// $scope.showAdd=true;
// }
// }

//添加商品
$scope.addShop=function(){

var newShop={};
newShop.sid=$scope.asid;
newShop.name=$scope.aname;
newShop.price=$scope.aprice;
newShop.product=$scope.aproduct;

//添加到集合中
$scope.shops.push(newShop);

//隐藏添加布局
$scope.showAdd=false;
//清空数据
$scope.asid="";
$scope.aname="";
$scope.aprice="";
$scope.aproduct="";
}

//定义一个全局变量
var modifyData;
//修改
$scope.modify=function(sid){
//显示
$scope.showModify=true;
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].sid==sid){
modifyData=$scope.shops[i];
break;
}

}
//赋值
$scope.mname=modifyData.name;
$scope.mprice=modifyData.price;
$scope.mproduct=modifyData.product;

}

//真正修改数据
$scope.modifyShop=function(){
modifyData.name=$scope.mname;
modifyData.price=$scope.mprice;
modifyData.product=$scope.mproduct;
//隐藏
$scope.showModify=false;

}

});

</script>

</body>
</html>

猜你喜欢