- <!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>
aj商品增删改查
最新推荐文章于 2024-05-02 22:05:58 发布