.yellowline{
background-color: yellow;
}
.redline{
background-color: red;
}
查询:
排序:
–请选择–
–名称正序–
–名称倒序–
–价格正序–
–价格倒序–
</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>
<!--|filter:{name:searchKey} 按照商品名过滤 |filter:searchKey 所有字段都可以过滤 -->
<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($index)" />
<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;//// s c o p e . s h o p s . l e n g t h ; i + + ) / / i f ( $ s c o p e . s h o p s [ i ] . s i d == i d ) / / 根 据 s i d 这 个 字 段 进 行 判 断 / / $ s c o p e . s h o p s . s p l i c e ( i , 1 ) ; / / b r e a k ; / / / / scope.shops.splice(id,1);
// if(scope.shops.length==0){
// //隐藏列表
//
scope.shops.length==0){ // //隐藏列表 //
scope.isShowTable=false;
// }
}
//定义批量删除的方法
$scope.delMore=function(){
//得到选中的checkbox
var cbs=$("input:checked");
cbs.each(function(){
// alert(
(this).val());for(vari=0;i<
(
t
h
i
s
)
.
v
a
l
(
)
)
;
f
o
r
(
v
a
r
i
=
0
;
i
<
scope.shops.length; i++) {
if(
scope.shops[i].sid==
s
c
o
p
e
.
s
h
o
p
s
[
i
]
.
s
i
d
==
(this).val()){
$scope.shops.splice(i,1);
break;
}
}
});
if($scope.shops.length==0){
//隐藏列表
$scope.isShowTable=false;
}
}
//显示或隐藏添加布局
// scope.isShowAdd=function(){
// if(
scope.isShowAdd=function(){ // if(
scope.showAdd==true){
// scope.showAdd=false;
// }else{
//
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>