验证查询添加

最新推荐文章于 2022-05-09 17:19:38 发布

原创最新推荐文章于 2022-05-09 17:19:38 发布 · 292 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../../js/angular/angular.js"></script>
       <script>
           var app = angular.module("myApp", []);
           app.controller("myCtrl", function($scope) {
               $scope.shops = [{
                   id: 10011120,
                   name: "iPhone X",
                   num: 90
               }, {
                   id: 10011121,
                   name: "华为mate10",
                   num: 20
               }, {
                   id: 10011122,
                   name: "vivoR12",
                   num: 55
               }];

               $scope.addShop = function() {
                   var flag1 = false;
                   var flag2 = false;
                   var flag3 = false;

                   if($scope.newId == "" || $scope.newId == null) {
                       alert("id不能为空");
                       flag1 = false;
                   } else if(isNaN($scope.newId)) {
                       alert("id必须为数字")
                       flag1 = false;
                   } else if($scope.newId.length != 8) {
                       alert("ID必须是8位");
                       flag1 = false;
                   }else{
                       flag1 = true;
                   }
                   var flag = false;
                   for(index in $scope.shops) {
                       if($scope.newName == $scope.shops[index].name) {
                           flag = true;
                       }
                   }
                   if(flag){
                       alert("用户名重复");
                       flag2 = false;
                   }else{
                       flag2 = true;
                   }
                   if($scope.newNum == "" || $scope.newNum == null) {
                       alert("数量不能为空");
                       flag3 = false;
                   } else if(isNaN($scope.newNum)) {
                       alert("数量必须为数字");
                       flag3 = false;
                   }else{
                       flag3 = true;
                   }

                   if(flag1 && flag2 && flag3){
                       //添加
                       $scope.shops.push({
                           id:$scope.newId,
                           name:$scope.newName,
                           num:$scope.newNum
                       });
                   }
               }

               //查询
               $scope.searchName = function(){
                   var flag = false;
                   $scope.searchShow = "";
                   for(index in $scope.shops){
                       if($scope.search == $scope.shops[index].name){
                           flag = true;
                       }
                   }
                   if($scope.search == null || $scope.search == ""){
                       alert("输入框不能为空");
                       $scope.searchShow = "";
                   }else if(flag){
                       alert("商品存在");
                       $scope.searchShow = $scope.search;
                   }else{
                       alert("商品不存在");
                       $scope.searchShow = null;
                   }
               }
           });
       </script>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h3>资产登记</h3>
           资产搜索：<input ng-model="search"/>　<button ng-click="searchName()">搜索</button><br /><br />
           <table border="1px solid blue" cellpadding="10" cellspacing="0">
               <thead>
                   <tr>
                       <th>资产编号</th>
                       <th>资产名称</th>
                       <th>资产数量</th>
                   </tr>
               </thead>
               <tbody>
                   <tr ng-repeat="shop in shops | filter:searchShow" align="center">
                       <td>{{shop.id}}</td>
                       <td>{{shop.name}}</td>
                       <td>{{shop.num}}</td>
                   </tr>
               </tbody>
           </table><br />
           <button>入库</button><br /><br />
           <form>
               资产编号:<input type="text" ng-model="newId" /><br /><br /> 资产名称:
               <input type="text" ng-model="newName" /><br /><br /> 资产数量:
               <input type="text" ng-model="newNum" /><br /><br />
               <button ng-click="addShop()">添加</button><br /><br />
           </form>
       </center>
   </body>

</html>