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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
