AngularJS用户列表的增删改查样式

来源：互联网发布：淘宝首页设计怎么设计编辑：程序博客网时间：2024/06/05 20:56

源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title>练习</title>
<style>
.even_cls {
background-color: #fff;
}

.odd_cls {
background-color: #4c8c99;
}
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: 1683px;
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>
var flag=false;
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.add = function(){
if($scope.id == undefined || $scope.id == ""){
alert("编号不能为空！");
return;

}
if($scope.name == undefined || $scope.name == ""){
alert("商品名称不能为空！");
return;

}
if($scope.price == undefined || $scope.price == ""){
alert("价格不能为空！");
return;

}
if($scope.count == undefined || $scope.count == ""){
alert("商品库存不能为空！");
return;

}
if (!/^\d+$/.test($scope.price)) {
alert("价格必须是数字！");
return;
}

if (!/^\d+$/.test($scope.count)) {
alert("商品库存必须是整数！");
return;
}
$scope.data.push({
id:$scope.id,
name:$scope.name,
price:$scope.price,
count:$scope.count,
});
$scope.id="";
$scope.name="";
$scope.price="";
$scope.count="";
$scope.addUserIsShow = false;
};
$scope.addUser = function(){
$scope.addUserIsShow = true;
};

//全部删除
$scope.removeAll = function () {
var b = confirm("确认全部删除");
if(b){
$scope.data = [];
}
};
//修改内容
$scope.editUser = function (index) {
var item = $scope.data[index];
$scope.e_id = item.id;
$scope.e_name = "";
$scope.e_price = "";
$scope.e_count = "";
$scope.editUserIsShow = true;
$scope.index = index;
};

$scope.edit = function () {
if($scope.e_name == undefined || $scope.e_name == ""){
alert("商品名称不能为空！");
return;

}
if($scope.e_price == undefined || $scope.e_price == ""){
alert("价格不能为空！");
return;

}
if($scope.e_count == undefined || $scope.e_count == ""){
alert("商品库存不能为空！");
return;

}
if (!/^\d+$/.test($scope.e_price)) {
alert("价格必须是数字！");
return;
}

if (!/^\d+$/.test($scope.e_count)) {
alert("商品库存必须是整数！");
return;
}
$scope.data[$scope.index].name = $scope.e_name;
$scope.data[$scope.index].price = $scope.e_price;
$scope.data[$scope.index].count = $scope.e_count;
$scope.addUserIsShow = false;
$scope.editUserIsShow = false;
};

//排序
$scope.order2 = function (num) {
if($scope.count1==2){
flag=true;
}else{
flag=false;
}
data.sort(function(a,b){
if(flag){
return a.count> b.count?1:-1;
}else{
return a.count< b.count?1:-1;
}
})
}
//默认为倒序
$scope.data = data;
data.sort(function(a,b){
if(flag){
return a.count> b.count?1:-1;
}else{
return a.count< b.count?1:-1;
}
});
//设置页面默认显示
$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.xuanz || $scope.checkD) {
var b = confirm("确认删除");
if (b) {
//删除所有商品信息
if ($scope.chk) {
$scope.data.splice(0, $scope.data.length);
$scope.show = false;
} else {
for (var i = $scope.xuan1.length - 1; i >= 0; i--) {
console.log($scope.xuan1[i]);
for (var j = 0; j < $scope.data.length; j++) {
console.log($scope.data[j].id == $scope.xuan1[i]);
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);
}
}

})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div class="search">
查询：<input type="text" placeholder="输入关键字…" ng-model="search">

<select style="width: 200px;" ng-model="count1" ng-change="order2()">
<option value="">倒序排序</option>
<option value="2">正序排序</option>
</select>

<button ng-click="removeAll()">全部删除</button>
<button ng-click="del()">批量删除</button>
<button class="tian" ng-click="addUser()">添加商品</button>
</div>

<table ng-show="show">
<thead style="background-color: #b2b2b2">
<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 colspan="2">数据操作</th>
</thead>
<tbody>

<tr ng-repeat="item in data| filter:search " ng-class="{even_cls: !$even, odd_cls: !$odd}">
<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="editUser($index)">修改内容</button></td>
<td>
<button ng-click="remove()">删除</button>
</td>
</tr>
</tbody>
</table>
<div class="userbt" ng-show="addUserIsShow">
<table border="1" cellpadding="10" cellspacing="0" class="bt">
<tr>
<td>商品编号:</td>
<td><input placeholder="请输入编号" ng-model="id"></td>
</tr>
<tr>
<td>商品名称:</td>
<td><input placeholder="请输入名称" ng-model="name"></td>
</tr>
<tr>
<td>商品价格:</td>
<td><input placeholder="请输入价格"ng-model="price"></td>
</tr>
<tr>
<td>商品库存:</td>
<td><input placeholder="请输入库存" ng-model="count"></td>
</tr>
<tr>
<td colspan="2"><button ng-click="add()">提交</button></td>
</tr>
</table>
</div>
<div ng-show="editUserIsShow">
<table border="1" cellpadding="10" cellspacing="0" class="bg">
<tr>
<td>
商品编号：
</td>
<td>
<input type="text" ng-model="e_id"/>
</td>
</tr>
<tr>
<td>
商品名称：
</td>
<td>
<input type="text" ng-model="e_name"/>
</td>
</tr>
<tr>
<td>
商品价格：
</td>
<td>
<input type="text" ng-model="e_price"/>
</td>
</tr>
<tr>
<td>
商品库存：
</td>
<td>
<input type="text" ng-model="e_count"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button ng-click="edit()">提交</button>
</td>
</tr>
</table>
</div>
</body>
</html>

阅读全文

1 0