周考3

最新推荐文章于 2020-05-08 13:35:31 发布

Song_dn

最新推荐文章于 2020-05-08 13:35:31 发布

阅读量285

点赞数

本文链接：https://blog.csdn.net/Song_dn/article/details/78579889

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>周考三</title>
       
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <style type="text/css">

           h2{
               width: 30%;
               height: 50px;
               margin: auto;
               margin-top: 25px;
           }
           .content{
               margin-top: 35px;
           }
           .left{
               margin-left: 30px;
               float: left;
           }
           .right{
               float: right;
               margin-right: 30px;

           }
           .sou{
               width: 250px;
               border-radius: 10px;
           }
           .xuan{
               width: 250px;
               margin-right: 20px;
           }
           button{
               background: chartreuse;
               border-radius: 5px;
           }
           table{
               width: 800px;
               margin-left: 30px;
           }
           .tj{

           }
        </style>
   </head>
   
   <body ng-app="myApp" ng-controller="myCtrl">
       <h2>商品库存管理系统</h2>
       <div class="tj">
           货物名称：<input type="text" id="mc"/><br />
           货物数量：<input type="text" id="sl"/><br />
           货物产地：<input type="text" id="cd"/><br />
           货物单价：<input type="text" id="dj"/><br />
           货物入库时期：<input type="text" id="sj"/>
       </div>

       <div class="content">
           <div class="left">
               <input type="text" placeholder="请输入关键字搜索..." class="sou" ng-model="key"/>
           </div>

           <div class="right">
               <select class="xuan" ng-model="xuanze" ng-options="x for x in names" ng-init="xuanze = names[0]" ng-change="change()"></select>
               <button ng-click="add()">入库</button>
           </div>

       </div><br /><br />

       <br /><br />
       <table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped">
           
           <tr style="background: gray;">
               <th>货物名称</th>
               <th>货物数量</th>
               <th>货物产地</th>
               <th>货物单价</th>
               <th>货物入库时期</th>
               <th>操作</th>
           </tr>
       <tr ng-repeat="x in data |filter:{mc:key} |orderBy:data.predicate">
           
               <th>{{x.mc}}</th>
               <th>{{x.sl}}</th>
               <th>{{x.cd}}</th>
               <th>{{x.dj |currency:'￥'}}</th>
               <th>{{x.sj |date:'yyyy-MM-dd HH:mm:ss '}}</th>
               
               <th><button ng-click="del($index)">删除</button></th>
           </tr>
       </table>
       <script type="text/javascript">
           var app = angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               //为数组添加数据
               $scope.data=[
               {"mc":"云南白药","sl":100,"cd":"云南","dj":19.9,"sj":"2017-11-20 09:32:21"},
               {"mc":"999感冒灵","sl":30,"cd":"北京","dj":12.5,"sj":"2017-11-20 10:32:21"},
               {"mc":"感康","sl":20,"cd":"河北","dj":16.6,"sj":"2017-11-20 11:11:11"}
               ];
               $scope.key='';
               //为搜索框赋值
               $scope.names=["按照货物数量正序排序","按照货物数量倒序排序"];
               //为下拉框赋值
               $scope.change=function(){
                   var xs = $scope.xuanze;
                   //通过判断为货物排序
                   if(xs=="按照货物数量正序排序"){
                       $scope.data.predicate="sl";
                   }else{
                       $scope.data.predicate="-sl";

               }
                   }
               $scope.add =function(){
                   //为表格添加数据
                   var mc =$("#mc").val();
                   var sl =$("#sl").val();
                   var cd =$("#cd").val();
                   var dj =$("#dj").val();
                   var sj =$("#sj").val();
                   var newData={
                       "mc":mc,
                       "sl":sl,
                       "cd":cd,
                       "dj":dj,
                       "sj":sj
                   };
                   $scope.data.push(newData);
               }

               $scope.del=function($index){
                   //删除数据
                   var b =confirm("是否删除？")
                  if(b){
                   $scope.data.splice($index,1);
                   alert("删除成功☺");
                  }else{
                   alert("您取消了删除！");
                  }
               }

           });
       </script>
   </body>
</html>