AngularJs增、删、改、查、排序、多选反选、批量删除

<!DOCTYPE html>
<html ng-app="App">

    <head>
        <meta charset="UTF-8">
        <title>月考增删改查综合练习</title>
        <script src="../libs/angular.min.js"></script>

        <script>
            var App = angular.module("App", []);
            App.controller("Demo", function($scope) {
                $scope.datas = [{
                    id: 101,
                    name: "电脑",
                    nums: 1,
                    price: 6800,
                    state: false
                }, {
                    id: 102,
                    name: "冰箱",
                    nums: 1,
                    price: 5200,
                    state: false
                }, {
                    id: 103,
                    name: "空调",
                    nums: 1,
                    price: 6100,
                    state: false
                }];

                //数量减减
                $scope.jian = function(index) {

                        if($scope.datas[index].nums <= 1) {
                            alert("数量不能为负数")
                        } else {
                            $scope.datas[index].nums--;

                        }

                    }
                    //数量加加
                $scope.jia = function(index) {
                    $scope.datas[index].nums++;
                }

                //总数量
                $scope.totalPrice = function() {
                    var to_price = 0;
                    for(var i = 0; i < $scope.datas.length; i++) {

                        to_price += $scope.datas[i].nums * $scope.datas[i].price
                    }
                    return to_price;
                }

                //总数
                $scope.totalnum = function() {
                    var to_num = 0;
                    for(var i = 0; i < $scope.datas.length; i++) {

                        to_num += $scope.datas[i].nums;

                    }
                    return to_num;
                }

                //删除单个行
                $scope.del = function(index) {
                    if(confirm("是否要删除?")) {
                        $scope.datas.splice(index, 1);
                    } else {
                        alert("已经取消删除!");
                    }
                }

                //多选框的全选反选
                $scope.selcheackAll = function() {

                    if($scope.selecheack) {
                        //判断如果是选中状态
                        for(var x = 0; x < $scope.datas.length; x++) {
                            $scope.datas[x].state = true;
                            //循环遍历里面所有选中框的状态 设置为true(选中状态)
                        }
                    } else {
                        //否则遍历里面所有选中框的状态为 false(不选中状态)
                        for(var x = 0; x < $scope.datas.length; x++) {
                            $scope.datas[x].state = false;

                        }
                    }
                }

                //批量删除  根据名字删除
                $scope.delselect = function() {
                    var arrs = [];
                    
                    //遍历原始数据
                    for(var x = 0; x < $scope.datas.length; x++) {
                        //判断原始数据的状态
                        if($scope.datas[x].state) {
                            //添加到定义的空数组里
                            arrs.push($scope.datas[x].name)
                        }

                    }
                    //判断数组的长度小于等于0 ,也就是没有数据时,先提示选择
                    if(arrs.length <= 0) {
                        alert("请您选中需要删除的数据!");

                    } else {
                        //否则有数据就遍历arr数组
                        for(var x = 0; x < arrs.length; x++) {
                              //遍历原始数据
                            for(var x2 = 0; x2 < $scope.datas.length; x2++) {
                                 //判断相等时,进行删除
                                if(arrs[x] == $scope.datas[x2].name) {
                                    $scope.datas.splice(x2, 1);

                                }

                            }

                        }
                    }
                }

                //添加商品
                $scope.add = function() {
                    var falg = false;

                    //判断id非空并且必须是数字
                    if($scope.ID == "" || $scope.ID == null) {
                        falg = false;
                        alert("id不能为空!");

                        return;
                    } else if(isNaN($scope.ID)) {
                        falg = false;
                        alert("id必须是数字");
                        return;
                    } {
                        falg = true;
                    }

                    //判断姓名不能为空
                    if($scope.IDname == "" || $scope.IDname == null) {

                        flag = false;
                        alert("姓名不能为空");
                        return;
                    } else {
                        flag = true;
                    }

                    //判断数量非空,并且是数字
                    if($scope.IDnum == "" || $scope.IDnum == null) {
                        flag = false;
                        alert("数量不能为空");
                        return;
                    } else if(isNaN($scope.IDnum)) {
                        flag = false;
                        alert("数量必须是数字")
                        return;
                    } else {
                        flag = true;
                    }

                    //判断单价非空,并且是数字
                    if($scope.IDprice == "" || $scope.IDprice == null) {
                        falg = false;
                        alert("单价不能为空!");
                        return;
                    } else if(isNaN($scope.IDprice)) {
                        flag = false;
                        alert("单价必须是数字!");
                    } {
                        falg = true;
                    }

                    if(falg = true) {
                        $scope.datas.push({
                            id: $scope.ID,
                            name: $scope.IDname,
                            nums: $scope.IDnum,
                            price: $scope.IDprice

                        })
                    }

                }

                //修改
                $scope.update = function(index) {

                    up_index = index;
                    if(confirm("确认要对该商品进行修改么?")) {
                        $scope.updateShow = true;

                    }

                }
                 //确认修改的方法
                $scope.updateFun = function() {
                    $scope.datas[up_index].id = $scope.updateId;
                    $scope.datas[up_index].name = $scope.updateName;
                    $scope.datas[up_index].nums = $scope.updateNum;
                    $scope.datas[up_index].price = $scope.updatePrice;

                }

            })
        </script>

    </head>

    <body ng-controller="Demo">
        <div align="center">
        <input type="text" placeholder="请输入查询商品" ng-model="search" /> 数量排序:
        <select ng-model="selOrder">
            <option value="nums">数量正序</option>
            <option value="-nums">数量倒序</option>
        </select>
        <button ng-click="delselect()">批量删除</button>

        <table border="1" cellspacing="0" width="650px" height="180px">
            <tr>
                <td><input type="checkbox" ng-model="selecheack" ng-click="selcheackAll()" /></td>
                <td>产品编号</td>
                <td>产品名称</td>
                <td>购买数量</td>
                <td>产品单价</td>
                <td>产品总价</td>
                <td>操作</td>
            </tr>

            <tr ng-repeat="x in datas | filter:{name:search}|orderBy:selOrder">
                <td><input type="checkbox" ng-model="x.state" /></td>
                <td>{{x.id}}</td>
                <td>{{x.name}}</td>
                <td><button ng-click="jian($index)">-</button>
                    <input type="number" ng-model="x.nums" />
                    <button ng-click="jia($index)">+</button>
                </td>
                <td>{{x.price | currency:"¥"}}</td>
                <td>{{x.nums* x.price |currency:"¥"}}</td>
                <td><button ng-click="del($index)">删除</button>
                    <button ng-click="update($index)">修改</button>

                </td>
            </tr>

        </table>

        <div>
            <span>总价:{{totalPrice()}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>总数:{{totalnum()}}</span>
        </div>

        <form style="border: 2px solid black; width: 500px;height: 251px; margin-top: 20px;">
            <h3>添加商品框</h3> 商品编号: <input type="text" placeholder="请输入id" ng-model="ID" /><br /><br /> 商品名称: <input type="text" placeholder="请输入商品名称" ng-model="IDname" /><br /><br /> 商品数量: <input type="number" placeholder="请输入商品数量" ng-model="IDnum" /><br /><br /> 商品单价: <input type="number" placeholder="请输入商品单价" ng-model="IDprice" /><br /><br />
            <button ng-click="add()">添加</button>
        </form>

        <form style="border: 2px solid black; width: 500px;height: 251px; margin-top: 20px;" ng-show="updateShow">
            <h3>修改商品表</h3> 商品编号:
            <input type="text" placeholder="输入需要修改id" ng-model="updateId" /><br /><br /> 商品名称:
            <input type="text" placeholder="输入需要修改商品" ng-model="updateName" /><br /><br /> 商品数量:
            <input type="number" placeholder="输入需要修改数量" ng-model="updateNum" /><br /><br /> 商品单价:
            <input type="number" placeholder="输入需要修改的单价" ng-model="updatePrice" /><br /><br />
            <button ng-click="updateFun()">确认修改</button>
        </form>
        
        </div>
    </body>

</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值