<!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>
angularjs用户管理
最新推荐文章于 2021-05-28 15:30:15 发布