<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="lib/js/ionic.bundle.min.js"></script>
<style type="text/css">
/*隔行換色*/
table tr:nth-child(2n) {
background-color: #CCCCCA;
}
</style>
<script>
//注意：：過濾完後要在查詢框單機空格鍵，不然表格沒有內容
angular.module("myApp", [])
.controller("OneDeom", function($scope, $filter) {
//新增區域默認不顯示
$scope.showadd = false;
//定義數組
$scope.datas = [];
//通過循環將對象添加進數組
for(var i = 1; i < 5; i++) {
var data1 = {
checked: false,
id: i,
goodName: "Iphone X" + i,
userName: "關羽" + i,
phone: "1590141516" + i,
price: "22.4" + i,
time: date = new Date(),
state: "待發貨",
updata: "修改",
delete: "刪除"
};
var data2 = {
checked: false,
id: 10 + i,
goodName: "Iphone X" + i,
userName: "關羽" + i,
phone: "1590141516" + i,
price: "22.4" + i,
time: date = new Date(),
state: "已發貨",
updata: "修改",
delete: "刪除"
};
//把對象放入數組
$scope.datas.push(data1);
$scope.datas.push(data2);
}
//添加
$scope.add = function() { //點擊添加按鈕時顯示
$scope.isShow = true;
}
//點擊保存按鈕
$scope.save = function() {
$scope.tips = false; //控制錯誤信息是否顯示
$scope.valArr = []; //定義一個放錯誤信息的數組
if($scope.goodName == undefined || $scope.goodName == null) {
$scope.valArr.push("商品不能爲空");
return;
}
if($scope.userName == undefined || $scope.userName == null) {
$scope.valArr.push("用戶名不能爲空");
return;
} else if($scope.userName.length < 3) {
$scope.valArr.push("用戶名長度要大於3個字符");
return;
}
var s = /^\d+$/;
if(!s.test($scope.price)) {
$scope.valArr.push("價錢只能是數字");
return;
}
if($scope.valArr.length > 0) {
$scope.tips = true;
} else {
var data2 = {
checked: false,
id: 100,
goodName: $scope.goodName,
userName: $scope.userName,
phone: "1590141516" + i,
price: $scope.price,
time: date = new Date(),
state: "待發貨",
updata: "修改",
delete: "刪除"
};
$scope.datas.push(data2); //把對象放入數組
$scope.isShow = false;
}
}
//刪除
$scope.del = function(d) { //當前刪除行的對象
for(var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].id == d.id) { //查找當前刪除的對象在數組中的索引
$scope.datas.splice(i, 1);
}
}
}
//全選操作
$scope.ckAll = function() {
var ck = $scope.isck; // 表頭中的複選框
for(var i = 0; i < $scope.datas.length; i++) {
$scope.datas[i].checked = ck;
}
}
//批量刪除
$scope.delAll = function() {
var b = false; //默認沒有選中
for(var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].checked == true) { //如果多選框有選中的
b = true; //那麼批量刪除按鈕也是選中
break;
}
}
//執行刪除操作
if(b == true) {
for(var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].checked == true) {
$scope.datas.splice(i, 1);
i--; //刪除後,下次依然從當前索引開始
}
}
} else {
alert("請選擇後操作");
}
}
//批量發貨
$scope.goAll = function() {
var b = false; //默認麼有選中的
for(var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].checked == true) {
b = true;
break;
}
}
//執行刪除操作
if(b == true) {
for(var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].checked == true) {
$scope.datas[i].state = "已發貨";
}
}
} else {
alert("請選擇後操作");
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="OneDeom">
<input type="button" value="新增" ng-click="add()" />
<input type="button" value="批量刪除" ng-click="delAll()" />
<input type="button" value="批量發貨" ng-click="goAll()" />
<input ng-model="selUserName" placeholder="根據用戶名查詢" />
<!--ng-model查詢時就過濾輸入的內容查詢-->
<input ng-model="selGoodName" placeholder="根據商品名查詢" />
<select ng-model="orderType">
<option value="">請選擇排序方式</option>
<option value="price">商品價格升序</option>
<option value="-price">商品價格降序</option>
<option value="time">生產日期升序</option>
<option value="-time">生產日期降序</option>
</select><br />
<table border="1px;" style="width: 800px;">
<thead>
<tr>
<td><input type="checkbox" ng-model="isck" ng-click="ckAll()" /></td>
<td>商品名</td>
<td>用戶名</td>
<td>手機號</td>
<td>價格</td>
<td>生產時間</td>
<td>狀態</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in datas|orderBy:orderType|filter:{'userName':selUserName,goodName:selGoodName}">
<td><input type="checkbox" ng-model="data.checked" /></td>
<td>{{data.goodName}}</td>
<td>{{data.userName}}</td>
<td>{{data.phone}}</td>
<td>{{data.price|currency:"￥"}}</td>
<td>{{data.time|date:"yyyy年MM月dd日 hh時mm分ss秒"}}</td>
<td>
<span ng-show="data.state=='已發貨'">{{data.state}}</span>
<span ng-show="data.state=='待發貨'"><!--這裏的值和上面的不能一樣-->
<a href="#" ng-click="data.state='已發貨'">
{{data.state}}
</a>
</span>
</td>
<td>
<a href="#" ng-hide="data.edit" ng-click="data.edit=true">修改</a>
<button ng-show="data.edit==true" ng-click="data.edit=false">保存</button>
<a href="#" ng-click="del(data)">{{data.delete}}</a>
</td>
</tr>
</tbody>
</table>
<!--增加的-->
<form ng-show="isShow">
商品名稱:<input ng-model="goodName" /><br /> 用戶名稱:
<input ng-model="userName" /><br /> 價錢：
<input ng-model="price" /><br />
<div style="width: 200px; background-color: pink;">
<ul>
<!-- 點擊保存時,把不合法的信息都放入數組 valArr -->
<li ng-repeat="c in valArr ">{{c}}</li>
</ul>
</div>
<input type="button" ng-click="save()" value="保存" />
</form>
</body>
</html>
商品管理系統
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Mac 安裝 Node Error: Could not symlink include/node/common.gypi
根據提示，賦權限，刪除文件等 jimmy@MacBook-Pro ~ % brew link node Linking /usr/local/Cellar/node/20.0.0... Er
Python: two dimensional array
# 假設puzzle是一個包含多個字符串的列表，每個字符串都是同一長度的，代表字母網格的一行 puzzle = [ "JGJGDDAOYD", "IDGFHSPOSA", "FGDIOSAFSC