购物车增删改查，正序倒序，批量删除

来源：互联网发布：unity3d animation 编辑：程序博客网时间：2024/05/16 09:49
<!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>
阅读全文
0 0