小型购物车

来源：互联网发布：淘宝卖家寄屎编辑：程序博客网时间：2024/04/28 18:37
<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            .yi{                width: 732px;                background: gold;                margin: 0 auto;            }            table{                width: 732px;                margin-top: 10px;            }            tr:nth-of-type(odd){ background:white;}            tr:nth-of-type(even){ background:#EEEEEE;}        </style>        <script src="js/angular.min.js"></script>        <script>            angular.module("app",[])            .controller("democ",function($scope){                $scope.users=[                    {name:"云南白药",num:20,place:"云南",price:19.9,date:"2017-11-20 09:32:21"},                    {name:"999感冒灵",num:100,place:"北京",price:12.5,date:"2017-11-20 10:32:21"},                    {name:"感康",num:30,place:"河北",price:16.6,date:"2017-11-20 11:11:11"}                ]                //排序数组                $scope.order=["按照库存数量正序","按照库存数量倒序"]                //删除                $scope.del=function(index){                    var is=confirm("确定要删除吗？");                    if(is==true){                        $scope.users.splice(index,1);                        alert("删除成功")                    }                }                //保存                $scope.add=function(){                    var name=$scope.tname;                    var num=$scope.tnum;                    var place=$scope.tplace;                    var price=$scope.tprice;                    var time=new Date();                    $scope.users.push({name:name,num:num,place:place,price:price,date:time})                    $scope.zt=false;                }                //入库                $scope.ku=function(){                    $scope.zt=true;                    $scope.tname=null;                    $scope.tnum=null;                    $scope.tplace=null;                    $scope.tprice=null;                }            })        </script>    </head>    <body ng-app="app" ng-controller="democ">        <div class="yi">            <h1 style="text-align: center;">商品库存管理系统</h1>            <input type="text" placeholder="输入关键字搜索"ng-model="sel"/>            <select ng-model="sort" >                <option value="-num">按照库存数量正序</option>                <option value="num">按照库存数量倒序</option>                <option value="-date">按照库存时间正序</option>                <option value="+date">按照库存时间倒序</option>            </select>            <input type="button" value="入库" ng-click="ku()"/>            <table cellpadding="0" cellspacing="0" border="1" ng-init="zt:false">                <tr style="background: #999999;">                    <th>货物名称</th>                    <th>货物数量</th>                    <th>货物产地</th>                    <th>货物单价</th>                    <th>货物入库日期</th>                    <th>操作</th>                </tr>                <tr ng-repeat="u in users | filter:{name:sel}| orderBy:sort">                    <th>{{u.name}}</th>                    <th>{{u.num}}</th>                    <th>{{u.place}}</th>                    <th>{{u.price|currency:'￥:'}}</th>                    <th>{{u.date | date : 'yyyy-MM-dd hh:mm:ss'}}</th>                    <th><a ng-click="del($index)">删除</a></th>                </tr>            </table>        </div>        <div style="margin-left: 280px;" ng-show="zt">            货物名称<input type="text" ng-model="tname"/><br />            货物数量<input type="text" ng-model="tnum"/><br />            货物产地<input type="text" ng-model="tplace"/><br />            货物单价<input type="text" ng-model="tprice"/><br />            <input type="button" value="保存" style="width: 240px;" ng-click="add()"/>        </div>    </body></html>
阅读全文
0 0