| <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> | |
| <style type="text/css"> | |
| .main{ | |
| text-align: center; | |
| } | |
| thead{ | |
| background: gray; | |
| } | |
| tbody tr:nth-child(even){ | |
| /*下标从1开始 even偶数*/ | |
| background-color: white; | |
| } | |
| tbody tr:nth-child(odd){ | |
| /*下标从1开始 odd奇数*/ | |
| background-color: gainsboro; | |
| } | |
| ul{ | |
| list-style:none; | |
| padding-top: 5px; | |
| padding-bottom: 5px; | |
| clear: both;/*清除浮动*/ | |
| width: 60%; | |
| margin: 0 auto; | |
| padding-left: 0px; | |
| } | |
| ul li{ | |
| margin-top: 5px; | |
| } | |
| .goods{ | |
| width: 60%; | |
| margin: 0 auto; | |
| } | |
| .goods input[type="text"]{ | |
| float: left; | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .goods select{ | |
| float:right; | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| margin-right: 30px; | |
| height: 22px; | |
| } | |
| #btn_add{ | |
| float:right; | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| background: green; | |
| border-radius: 5px; | |
| border: 0px; | |
| width: 90px; | |
| } | |
| #input_date{ | |
| width: 158px; | |
| height: 15px; | |
| padding-left: 0px; | |
| padding-top: 1px; | |
| padding-bottom: 1px; | |
| } | |
| </style> | |
| </head> | |
| <body ng-app="myapp" ng-controller="myctrl"> | |
| <div class="main"> | |
| <h2>商品库存管理系统</h2> | |
| <div class="goods"> | |
| <!--placeholder 相当于hint 提示文字--> | |
| <input type="text" name="" value="" placeholder="输入关键字搜索..." ng-model="searchKey"/> | |
| <input type="button" name="" id="btn_add" value="入库" ng-click="isAdd=!isAdd" /> | |
| <select ng-model="orderKey"> | |
| <option value="num">按货物数量正序排列</option> | |
| <option value="-num">按货物数量倒序排列</option> | |
| <option value="gdate">按入库时间正序排列</option> | |
| <option value="-gdate">按入库时间倒序排列</option> | |
| </select> | |
| </div> | |
| <ul ng-show="isAdd"> | |
| <li>货物名称 <input type="text" ng-model="gname"/></li> | |
| <li>货物数量 <input type="text" ng-model="gnum"/></li> | |
| <li>货物产地 <input type="text" ng-model="gproduction"/></li> | |
| <li>货物单价 <input type="text" ng-model="gprice"/></li> | |
| <li>入库日期 <input type="date" ng-model="ggdate" id="input_date"/></li> | |
| <li><input type="button" value="保存" ng-click="saveGoods()"/></li> | |
| </ul> | |
| <div class="goods"> | |
| <table border="1" cellspacing="0" cellpadding="0" width="100%"> | |
| <thead><tr> | |
| <th>货物名称</th> | |
| <th>货物数量</th> | |
| <th>货物产地</th> | |
| <th>货物单价</th> | |
| <th>货物入库日期</th> | |
| <th>操作</th> | |
| </tr></thead> | |
| <tbody> | |
| <tr ng-repeat="x in goods|filter:searchKey|orderBy:orderKey"> | |
| <td>{{x.name}}</td> | |
| <td>{{x.num}}</td> | |
| <td>{{x.production}}</td> | |
| <td>{{x.price|currency:"￥:"}}</td> | |
| <td>{{x.gdate|date:"yyyy-MM-dd HH:mm:ss"}}</td> | |
| <td><input type="button" name="" id="" value="删除" ng-click="delgoods(x.name)"/></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| var app=angular.module("myapp",[]); | |
| app.controller("myctrl",function($scope){ | |
| //搜索关键字 | |
| $scope.searchKey=""; | |
| //初使化 | |
| $scope.orderKey="num"; | |
| //不显示 | |
| $scope.isAdd=false; | |
| $scope.goods=[ | |
| {name:"云南白药",num:100,production:"云南",price:19.9,gdate:(new Date()).setDate(new Date().getDate()-1)}, | |
| {name:"999感冒灵",num:30,production:"北京",price:12.5,gdate:(new Date()).setDate(new Date().getDate()-2)}, | |
| {name:"感康",num:20,production:"河北",price:16.6,gdate:(new Date()).setDate(new Date().getDate()-3)}]; | |
| $scope.delgoods=function(gname){ | |
| //弹出确认窗口 alert confirm promt | |
| var c=confirm("确定要删除吗？"); | |
| if(c){//点击了确定按钮 | |
| for (var i = 0; i < $scope.goods.length; i++) { | |
| if($scope.goods[i].name==gname){ | |
| $scope.goods.splice(i,1);//进行删除 | |
| break; | |
| } | |
| } | |
| alert("删除成功！"); | |
| }else{ | |
| } | |
| } | |
| $scope.saveGoods=function(){ | |
| //定义一个对象 | |
| var newgoods={}; | |
| newgoods.name=$scope.gname; | |
| newgoods.num=$scope.gnum; | |
| newgoods.production=$scope.gproduction; | |
| newgoods.price=$scope.gprice; | |
| newgoods.gdate=$scope.ggdate; | |
| //进行添加 | |
| $scope.goods.push(newgoods); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
2435
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
