<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../Anglert/angular.js" ></script>
<script>
var myapp=angular.module("myapp",[]);
var data=[
{
done:false,
id:"1234",
name:"ipad",
price:3400,
only:10,
},
{
done:false,
id:1244,
name:"iphone",
price:6400,
only:5,
},
{
done:false,
id:1334,
name:"mypad",
price:4400,
only:20,
},
{
done:false,
id:8234,
name:"zpad",
price:8400,
only:130,
}
]
myapp.controller("myctrl",function ($scope) {
$scope.data=data;
/*刪除信息*/
$scope.del=(function (hh) {
var con=confirm("確定刪除麼?");
if(con==true){
for(var i=0;i<$scope.data.length;i++){
if($scope.data[i].name==hh)
{
$scope.data.splice(i,1);
}
}
}else{
}
}) ;
/*刪除選中的*/
$scope.delall=function () {
var con=confirm("確定刪除麼?");
if(con==true){
for(var i=0;i<$scope.data.length;i++)
{
if($scope.data[i].done==true)
{
$scope.data.splice(i,1);
i--;
}
}
}else{
}
}
/*全選*/
$scope.checkAll=function () {
for(var i=0;i<$scope.data.length;i++)
{
if($scope.chec==true)
{
$scope.data[i].done=true;
}
else{
$scope.data[i].done=false;
}
}
}
$scope.shop = function () {
$scope.shop.color="red";
}
});
$(function () {
$("#a").click(function () {
$("#a").css("color","red");
$("#aa").css("color","black");
$("#a3").css("color","black");
$("#a4").css("color","black");
$("#a5").css("color","black");
});
$("#aa").click(function () {
$("#a").css("color","black");
$("#aa").css("color","red");
$("#a3").css("color","black");
$("#a4").css("color","black");
$("#a5").css("color","black");
});
$("#a3").click(function () {
$("#a").css("color","black");
$("#aa").css("color","black");
$("#a3").css("color","red");
$("#a4").css("color","black");
$("#a5").css("color","black");
});
$("#a4").click(function () {
$("#a").css("color","black");
$("#aa").css("color","black");
$("#a3").css("color","black");
$("#a4").css("color","red");
$("#a5").css("color","black");
});
$("#a5").click(function () {
$("#a").css("color","black");
$("#aa").css("color","black");
$("#a3").css("color","black");
$("#a4").css("color","black");
$("#a5").css("color","red");
});
});
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div>
<h3>商品庫存信息管理</h3>
<hr>
<div style="background-color: #E8FBFF;height: 25px">
<input type="text" value="" placeholder="請輸入關鍵字..." ng-model="search">
<button type="button" style="margin-left:1270px;color: #c3c3c3;background-color: red"ng-click="delall()">批量刪除</button>
</div>
<div>
<table border="1" bordercolor="#c3c3c3" width="500" cellpadding="0" cellspacing="0" style="width:1350px;text-align: center">
<thead>
<tr>
<td ><input type="checkbox"ng-click="checkAll()" ng-model="chec"></td>
<td id="a" ng-click="desc=!desc;col='id'" >商品編號</td>
<td id="aa" ng-click="desc=!desc;col='name'">商品名稱</td>
<td id="a3" ng-click="desc=!desc;col='price'">商品價格</td>
<td id="a4"ng-click="desc=!desc;col='only'">商品庫存</td>
<td id="a5"ng-click="desc=!desc;col=''">數據操作</td>
</tr>
</thead>
<tr ng-repeat="item in data|filter:{'name':search}|orderBy:col:desc">
<td><input type="checkbox" ng-model="item.done"></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price|currency:"¥"}}</td>
<td>{{item.only}}</td>
<td>
<button style="color: #E8FBFF;background-color: yellow" ng-click="del(item.name)">刪除</button>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>商品題(查詢+批量刪除)
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章