<!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 falg=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.ycxiugai=false;
$scope.yctianjia=false;
/**排污*/
$scope.px1=function(){
alert($scope.paixu);
if($scope.paixu==2){
falg=true;
}else{
falg=false;
}
data.sort(function(a,b){
if(falg){
return a.count< b.count?1:-1;
}else{
return a.count>b.count?1:-1;
}
});
}
$scope.tianjia=function(){
$scope.yctianjia=true;
}
$scope.xiugai=function(index){
var jihe=$scope.data[index];
$scope.x_id=jihe.id,
$scope.x_name="",
$scope.x_price="",
$scope.x_count="",
$scope.ycxiugai=true;
$scope.index=index;
}
$scope.data = data;
//设置页面默认显示
data.sort(function(a,b){
if(falg){
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.shanchu=function(){
var b = confirm("确认删除");
if(b){
$scope.data.splice(0, $scope.data.length);
//让商品信息管理页面为空白界面
$scope.show = false;
}
}
/**添加*/
$scope.tianjiaan=function(){
if ($scope.t_id == undefined || $scope.t_id == "") {
alert("id不能为空!");
return;
}
if ($scope.t_name == undefined || $scope.t_name == "") {
alert("name不能为空!");
return;
}
if ($scope.t_price == undefined || $scope.t_price == "") {
alert("price不能为空!");
return;
}
if ($scope.t_count == undefined || $scope.t_count == "") {
alert("count不能为空!");
return;
}
if (!/^\d+$/.test($scope.t_id)) {
alert("id必须是整数!");
return;
}
if (!/^\d+$/.test($scope.t_price)) {
alert("价格必须是整数!");
return;
}
if (!/^\d+$/.test($scope.t_count)) {
alert("数量必须是整数!");
return;
}
$scope.data.push({
id:$scope.t_id,
name:$scope.t_name,
price:$scope.t_price,
count:$scope.t_count
});
data.sort(function(a,b){
if(falg){
return a.count< b.count?1:-1;
}else{
return a.count>b.count?1:-1;
}
});
$scope.t_id="",
$scope.t_name="",
$scope.t_price="",
$scope.t_count=""
$scope.yctianjia=false;
}
/**排序*/
$scope.px=function(){
if($scope.paixu==2){
falg=true;
}else{
falg=false;
}
data.sort(function(a,b){
if(falg){
return a.count> b.count?1:-1;
}else{
return a.count<b.count?1:-1;
}
});
}
$scope.xiugaian=function(){
if ($scope.x_id == undefined || $scope.x_id == "") {
alert("id不能为空!");
return;
}
if ($scope.x_name == undefined || $scope.x_name == "") {
alert("name不能为空!");
return;
}
if ($scope.x_price == undefined || $scope.x_price == "") {
alert("price不能为空!");
return;
}
if ($scope.x_count == undefined || $scope.x_count == "") {
alert("count不能为空!");
return;
}
if (!/^\d+$/.test($scope.x_id)) {
alert("id必须是整数!");
return;
}
if (!/^\d+$/.test($scope.x_price)) {
alert("价格必须是整数!");
return;
}
if (!/^\d+$/.test($scope.x_count)) {
alert("数量必须是整数!");
return;
}
$scope.ycxiugai=false;
$scope.data[$scope.index].name=$scope.x_name;
$scope.data[$scope.index].price=$scope.x_price;
$scope.data[$scope.index].count=$scope.x_count;
data.sort(function(a,b){
if(falg){
return a.count< b.count?1:-1;
}else{
return a.count>b.count?1:-1;
}
});
}
$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 ng-model="paixu" ng-change="px1()">
<option value="">库存正序</option>
<option value="2">库存倒序</option>
</select>
<button ng-click="del()">批量删除</button>
<button ng-click="tianjia()">添加</button>
<button ng-click="shanchu()">删除全部</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>
<th>数据修改</th>
</thead>
<tbody>
<!--实现模糊查询-->
<tr ng-repeat="item in data| filter:search">
<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>
<td>
<button ng-click="xiugai($index)">修改</button>
</td>
</tr>
</tbody>
</table>
<div ng-show="ycxiugai">
<p>修改商品</p>
<p>商品编号:<input type="text" ng-model="x_id"/></p>
<p>商品名称:<input type="text" ng-model="x_name"/></p>
<p>商品价格:<input type="text" ng-model="x_price"/></p>
<p>商品库存:<input type="text" ng-model="x_count"/></p>
<p>
<button ng-click="xiugaian($index)">修改</button>
</p>
</div>
<div ng-show="yctianjia">
<p>添加商品</p>
<p>商品编号:<input type="text" ng-model="t_id"/></p>
<p>商品名称:<input type="text" ng-model="t_name"/></p>
<p>商品价格:<input type="text" ng-model="t_price"/></p>
<p>商品库存:<input type="text" ng-model="t_count"/></p>
<p>
<button ng-click="tianjiaan($index)">添加</button>
</p>
</div>
</body>
</html>
angularjs的表格的增删改查(关于商品)
最新推荐文章于 2018-03-07 12:04:31 发布