angularJs

来源：互联网发布：plc编程线编辑：程序博客网时间：2024/06/16 19:18

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           * {
               margin: 0 auto;
           }
           input{
               margin-top: 20px;
           }
       </style>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">

           <p align="center">资产登记</p>
           <div class="d1">
           <table border="1" cellspacing="0" cellpadding="0" align="center">
               <tr>
                   <th>资产编号</th>
                   <th>资产名称</th>
                   <th>资产数量</th>
               </tr>
               <tr align="center" ng-repeat="g in goods">
                   <td>{{g.id}}</td>
                   <td>{{g.name}}</td>
                   <td>{{g.count}}</td>
               </tr>
           </table>
       </div>
       <div class="d2" align="center" style="margin-top: 10px;">
           资产编号<input type="text" ng-model="sid"/><span ng-model="spid"></span><br />
           资产名称<input type="text" ng-model="sname"/><br />
           资产数量<input type="text" ng-model="scount"/><span ng-model="spcount"></span><br />
           <input type="button" value="资产录入" ng-click="ins()"/>
       </div>
       <div class="d3" align="center" >
           资产搜索<input type="text" ng-model="sel"/><br />
           <input type="button" value="搜索" ng-click="sele()"/>
       </div>
   </body>
   <script type="text/javascript">
       var mo = angular.module("myApp", []);
       mo.controller("myCtrl", function($scope) {

           $scope.goods = [{
               "id": 10011120,
               "name": "iphoneX",
               "count": 99
           }, {
               "id": 10011121,
               "name": "华为mate10",
               "count": 20
           }, {
               "id": 10011122,
               "name": "vivoR20",
               "count": 55
           }];
       //查询资产是否存在的方法
       $scope.sele = function(){
           //判断输入框是否为空
           if($scope.sel != undefined && $scope.sel!=""){

           }else{
               alert("输入框不能为空");
               return;
           }
           //判断是否包含要搜索的内容
           for (var i = 0; i < $scope.goods.length; i++){
               if($scope.goods[i].name == $scope.sel){
                   alert("搜索到相关内容");
                   return;
               }
           }
           alert("没有搜索到相关内容");

       }

       //添加资产的方法
       $scope.ins = function(){
           var zid = /^\d{8}$/;
               //判断是否为数字，长度是否为8
               if(!zid.test($scope.sid)){
                   alert("编号必须为数字且长度为8位");
                   return;
               }
               //判断是否为空
               if($scope.sname != undefined ){
           for (var i = 0; i < $scope.goods.length; i++) {
               //判断是否存在
               if($scope.goods[i].name == $scope.sname){
                   alert("该资产已存在");
                   return;
               }
           }
           }else{
               alert("名称不能为空");
               return;
           }
           //判断是否位数字
           if(isNaN($scope.scount)){
               alert("数量必须为数字");
               return;
           }
           var g = {
               "id": $scope.sid,
               "name": $scope.sname,
               "count": $scope.scount
           }
           $scope.goods.push(g);
       }

       });
   </script>

</html>

阅读全文

0 0