购物车，添加：判断（为空，为数字，等于8位数）搜索名称显示

来源：互联网发布：国债逆回购知乎编辑：程序博客网时间：2024/06/05 15:13

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="../js/agular/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;
     //判断ID不为空必须为数字必须是8位数
     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(){
     //alert("sss");
     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){
      $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 />
    资产名称:<input type="text" ng-model="newName" /><br />
    资产数量:<input type="text" ng-model="newNum" /><br />
    <button ng-click="addShop()">添加</button>
   </form>
  </center>
</body>
</html>

阅读全文

0 0