您的位置：首页 > 其它

商品管理系统

2017-11-22 20:25 155 查看 
<!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; //那么批量删除按钮也是选中

4000
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航