<!DOCTYPE
html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border-collapse: collapse;
}
td, th {
width: 200px;
border: 1px solid gainsboro;
text-align: center;
padding: 20px;
}
button {
width: 100px;
height: 40px;
background: orange;
color: white;
border: 0px;
border-radius: 5px;
}
.search {
background: ghostwhite;
border: 1px solid gainsboro;
border-radius: 5px;
width: 1450px;
height: 50px;
line-height: 50px;
margin-bottom: 10px;
}
.search input {
width: 200px;
height: 30px;
color: #999;
border-radius: 5px;
margin-left: 20px;
border: 1px solid gainsboro;
}
.search button {
float: right;
margin-top: 5px;
margin-right: 10px;
background: red;
}
.active {
color: red;
}
</style>
<script src="angular.js"></script>
<script>
var data =
[{"id": 1234, "name": 'ipad', "price": 3400, "count": 10},
{"id": 1244, "name": 'aphone', "price": 6400, "count": 100},
{"id": 1334, "name": 'mypad', "price": 4400, "count": 20},
{"id": 8234, "name": 'zpad', "price": 8400, "count": 130},
];
var myapp = angular.module("myapp", []);
myapp.controller("myCtrl", function ($scope) {
$scope.data = data;
//設置頁面默認顯示
$scope.show = true;
//設置checkbox默認不選中
$scope.chk = false;
$scope.xuanz = false;
$scope.check = function (val) {
/*判斷是否選中，然後控制下方的是否選中*/
if (val) {
$scope.xuanz = true;
} else {
$scope.xuanz = false;
}
}
$scope.search;
/*刪除按鈕*/
$scope.remove = function (index) {
/*判斷是否確認刪除*/
var b = confirm("確認刪除");
if (b) {
$scope.data.splice(index, 1);
}
}
$scope.del = function () {
/*判斷是否確認刪除*/
if ($scope.chk || $scope.checkD) {
var b = confirm("確認刪除");
if (b) {
//刪除所有商品信息
if ($scope.chk) {
$scope.data.length=0;
//讓商品信息管理頁面爲空白界面
$scope.show = false;
} else {
for (var i = $scope.xuan1.length - 1; i >= 0; i--) {
for (var j = 0; j < $scope.data.length; j++) {
if ($scope.data[j].id == $scope.xuan1[i]) {
$scope.data.splice(j, 1);
}
}
}
}
}
} else {
alert("先進行選中要刪除的商品信息");
}
}
$scope.checkD = false;
$scope.xuan1 = [];
$scope.xuan = function (xuanl, id) {
console.log(id);
$scope.checkD = xuanl;
if (xuanl) {
$scope.xuan1.push(id);
}else{
$scope.xuan1.pop();
}
}
//判斷的功能,默認是名字排序
$scope.sort = "name";
$scope.active = name;
$scope.rese = false;
$scope.sort1 = function (sort) {
$scope.active = sort;
console.log(sort);
if ($scope.sort == sort) {
$scope.rese = !$scope.rese;
}
else {
$scope.rese = false;
}
$scope.sort = sort;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div class="search">
<input type="text" placeholder="輸入關鍵字…" ng-model="search">
<button ng-click="del()">批量刪除</button>
</div>
<!--用來遍歷對象並渲染到頁面中-->
<table ng-show="show">
<thead>
<th><input type="checkbox" ng-model="chk" ng-click="check(chk)"></th>
<th ng-click="sort1('id')" ng-class="{active:active=='id'}">商品編號</th>
<th ng-click="sort1('name')" ng-class="{active:active=='name'}">商品名稱</th>
<th ng-click="sort1('price')" ng-class="{active:active=='price'}">商品價格</th>
<th ng-click="sort1('count')" ng-class="{active:active=='count'}">商品庫存</th>
<th>數據操作</th>
</thead>
<tbody>
<!--實現模糊查詢-->
<tr ng-repeat="item in data| filter:search | orderBy:sort:rese ">
<td><input type="checkbox" ng-model="xuanz" ng-click="xuan(xuanz,item.id)"></td>
<td>{{item.id}}</td>
<td> {{item.name}}</td>
<!--商品價格前面加“￥”-->
<td>{{item.price | currency:"￥"}}</td>
<td>{{item.count}}</td>
<td>
<button ng-click="remove($index)">刪除</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
