<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
button{background-color: darkorange; color: azure;}
</style>
<script type="text/javascript" src="js/angular.js"></script>
<script>
var app=angular.module("myApp",[]);
$scope="Name";
$scope.desc=0;
app.controller("myCtrl",function($scope){
$scope.shuzu=[
{
"Bianhao":1234,
"Name":"ipad",
"Price":"¥:3.400.00",
"Kucun":10
},
{
"Bianhao":1244,
"Name":"aphone",
"Price":"¥:6.400.00",
"Kucun":100
},
{
"Bianhao":1334,
"Name":"mypad",
"Price":"¥:4.400.00",
"Kucun":20
},
{
"Bianhao":8234,
"Name":"zpad",
"Price":"¥:8.400.00",
"Kucun":130
}
];
$scope.delete=function($index){
if($index>=0){
if(confirm("是否删除此商品")){
$scope.shuzu.splice($index,1);
}
}
};
$scope.delete1=function($index){
if($scope.shuzu.length>=0){
if(confirm("是否全部删除商品")){
$scope.shuzu.splice($index);
}
}
};
var isAllSeclected=true;
$scope.checkAll=function(){
for(var i=0;i<$scope.list.length;i++){
if(isAllSeclected){
$scope.list[i].chk=true;
}else{
$scope.list[i].chk=false;
}
}
isAllSeclected!=isAllSeclected;
}
});
</script>
<title></title>
</head>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td colspan="6" align="center"><input type="text" ng-model="query"/><button ng-click="delete1($index)">批量删除</button></td>
</tr>
<tr>
<th><input type="checkbox" ng-model="all" ng-click="checkAll()"></th>
<th ng-click="col='Bianhao';desc!=desc">商品编号</th>
<th ng-click="col='Name';desc!=desc">商品名称</th>
<th ng-click="col='Price';desc!=desc">商品价格</th>
<th ng-click="col='Kucun';desc!=desc">商品库存</th>
<th>删除操作</th>
</tr>
<tr ng-repeat="x in shuzu|orderBy:col:desc|filter:query">
<td><input type="checkbox" name="chk" ng-model="item.chk" ng-checked="all"> </td>
<td>{{x.Bianhao}}</td>
<td>{{x.Name}}</td>
<td>{{x.Price}}</td>
<td>{{x.Kucun}}</td>
<td><button ng-click="delete($index)">删除</button></td>
</tr>
</table>
</body>
</html>
侧滑+底部导航+图片滑动
最新推荐文章于 2021-06-03 19:31:28 发布