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

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>
购物车增删改查,正序倒序,批量删除_第1张图片

你可能感兴趣的:(购物车增删改查,正序倒序,批量删除)