添加

最新推荐文章于 2024-10-11 21:19:12 发布

原创最新推荐文章于 2024-10-11 21:19:12 发布 · 250 阅读

CC 4.0 BY-SA版权

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

//添加商品
               $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>