添加

本文介绍了一个使用AngularJS实现的商品添加功能,包括表单输入验证和错误提示。通过具体的代码示例展示了如何进行ID和名称的非空检查及数字类型验证,并避免重复的产品名称。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//添加商品
                $scope.isShow = false;
                $scope.isShow2 = false;
                $scope.showForm = function() {
                    if($scope.isShow) {
                        $scope.isShow = false;
                    } else {
                        $scope.isShow = true;
                    }
                }
                //提交按钮
                $scope.submit = function() {
                    $scope.errorArr = [];
                    //判断id是否为空
                    if($scope.newId == null || $scope.newId == "") {
                        $scope.errorArr.push("ID不能为空");
                    } else if(isNaN($scope.newId)) {
                        $scope.errorArr.push("ID必须是数字");
                    }
                    if($scope.newName == null || $scope.newName == "") {
                        $scope.errorArr.push("产品名称不能为空");
                    } else {
                        for(index in $scope.products) {
                            if($scope.products[index].name == $scope.newName) {
                                $scope.errorArr.push("产品名称不能重复");
                            }
                        }
                    }
                    if($scope.newPrice == null || $scope.newPrice == "") {
                        $scope.errorArr.push("价格不能为空");
                    } else if(isNaN($scope.newPrice)) {
                        $scope.errorArr.push("价格必须是数字");
                    }

                    if($scope.errorArr.length > 0) {
                        //显示列表
                        $scope.isShow2 = true;
                    } else {
                        $scope.isShow2 = false;
                        //添加商品
                        var newShop = {
                            id: parseInt($scope.newId),
                            name: $scope.newName,
                            price: parseInt($scope.newPrice),
                            num:1,
                            state: false
                        };
                        $scope.products.push(newShop);
                        $scope.isShow = false;
                    }
                }

       



<button ng-click="showForm()">添加商品</button><br /><br />

            <fieldset ng-show="isShow" id="" style="width: 400px;">
                <legend>添加商品</legend><br />
                <form>
                    产品编号:<input type="text" ng-model="newId" /><br /><br /> 产品名称:
                    <input type="text" ng-model="newName" /><br /><br /> 产品价格:
                    <input type="text" ng-model="newPrice" /><br /><br />

                    <ul ng-show="isShow2" style="width: 200px; background-color: #f89;">
                        <li ng-repeat="error in errorArr">{{error}}</li>
                    </ul>

                    <input ng-click="submit()" type="button" value="添加" />
                </form>

            </fieldset>




       
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值