安哥拉综合题

WEB前端 waitig 401℃ 百度已收录 0评论
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>练习</title>
    <style>

        table {
            border-collapse: collapse;
        }

        td, th {
            width: 70px;
            border: 1px solid gainsboro;
            text-align: center;
            padding: 20px;
        }
    </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>

本文由【waitig】发表在等英博客
本文固定链接:安哥拉综合题
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)