一个小小的项目

最新推荐文章于 2020-09-03 15:08:32 发布

祁凯凯

最新推荐文章于 2020-09-03 15:08:32 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/qikaikai0324/article/details/78831655

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/angular.js">

       </script>
       <style type="text/css">
.kuan{
   width:200px; height:30px;
      /*background:background:url(../img/kuan_01.jpg) no-repeat; border:none;*/
   border-top-left-radius:5em;
   border-top-right-radius:5em;
   border-bottom-right-radius:5em;
   border-bottom-left-radius:5em;
   margin-left: 28%;
       float:left;
       }

.an{
   width:20px; height:30px;

   float:left;
   margin-left: -30px;
   margin-top: 10px;
   }
   .pai{
      width: 220px;
      height: 30px;
      margin-left: 100px;
      margin-top: -10px;
      }
.
</style>
       <script type="text/javascript">
           var app=angular.module("myApp",[]);
           app.controller("myCtrl",function($scope,$http){

               $http(

                   {
                       mothod:"get",
                       url:"aaa.json"
                   }
               ).then( function cheng(response){


                   console.log(response);
                   $scope.item=response.data;

               },function shibai(){
                   alert("失败")

               });




               $scope.del=function(name){

                   if(window.confirm("确认要删除"+name+"么")){


                       for(index in $scope.item )
                       {

                           if(name==$scope.item[index].name)
                           {


                               $scope.item.splice(index,1);
                           }


                       }

                   }
               }

               $scope.biao=false;
               $scope.add=function(){

               $scope.biao=true;


           }
               $scope.tj=function(){


               $scope.biao=false;
                      //添加学生函数
$scope.item.push({name:$scope.Newname,num:$scope.Newnum,address:$scope.Newaddress,price:$scope.Newprice,data:$scope.Newdate});
$scope.Newname='';
$scope.Newnum='';
$scope.Newaddress='';
$scope.Newprice='';
$scope.Newdate='';
           }




           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">



               <input type="text" placeholder="输入关键字搜索..." class="kuan" ng-model="ming"/>
               <img src="img/aa.jpg" alt="" style="width: 20px;height: 20px;" class="an"/>
               <select ng-model="pai">
                   <option value="num">按照库存数量正序排序</option>
                   <option value="-num">按照库存数量到序排序</option>
                   <option value="price">按照入库时间正序排序</option>
                   <option value="-price">按照入库时间到序排序</option>

               </select>
               <button ng-click="add()">入库</button>

       <center>

           <table border="1" cellspacing="0" cellpadding="10" style="margin-top:20px;">
               <tr>
                   <th>货物名称</th>
                   <th>货物数量</th>
                   <th>货物产地</th>
                   <th>货物单价</th>
                   <th>货物入库日期</th>
                   <th>操作</th>
               </tr>
               <tr ng-repeat="n in item | filter:{'name':ming} | orderBy:pai" >
                   <td>{{n.name}}</td>
                   <td>{{n.num}}</td>
                   <td>{{n.address}}</td>
                   <td>{{n.price |currency:"￥"}}</td>
                   <td>{{n.data | date:"yyyy-MM-dd    hh:mm:ss"}}</td>

                   <td><button ng-click="del(n.name)">删除</button></td>

               </tr>



           </table>
           <form style="margin-top: 30px;" ng-show="biao" >

               货物名称：    <input type="text" placeholder="请输入商品名称" ng-model="Newname"/><br /><br />
               货物数量：    <input type="text" placeholder="清输入商品数量" ng-model="Newnum"/><br /><br />

               货物产地：    <input type="text" placeholder="请输入商品名称" ng-model="Newaddress"/><br /><br />
               货物单价：    <input type="text" placeholder="请输入商品名称" ng-model="Newprice"/><br /><br />

               入库日期：    <input type="text" placeholder="请输入商品名称" ng-model="Newdate"/><br /><br />
               <input type="submit" value="提交" ng-click="tj()" />
           </form>


       </center>

   </body>
</html>

祁凯凯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个小小的项目

.kuan{ width:200px; height:30px; /*background:background:url(../img/kuan_01.jpg) no-repeat; border:none;*/ border-top-left-radius:5em; border-top-right-radius:5em; border-
复制链接

扫一扫