angular js查询排序添加删除

最新推荐文章于 2017-12-17 20:55:12 发布

你的孤独虽败犹荣

最新推荐文章于 2017-12-17 20:55:12 发布

阅读量176

点赞数

本文链接：https://blog.csdn.net/zhou742626/article/details/78820752

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           body{
               width: 730px;
               height: 245px;
           }
           #in{
               width: 150px;
               height: 23px;
               border: 1px solid black;
               border-radius:15px ;
               position: relative;
               left: -140px;
           }
           img{
               position: relative;
               left: -170px;
               top: 2px;
           }
           #se{
               width: 155px;
               height: 25px;
               position: relative;
               right: -110px;
           }
           #bu{
               width: 70px;
               height: 28px;
               background: #99ff00;
               border: 1px solid #99ff00;
               border-radius:5px ;
               position: relative;
               right: -140px;
           }
           #table{
               width: 690px;
               height: 100px;
               margin-top: 15px;
           }
           #table tr:nth-child(odd){
                background-color: #DFDFDF;
                table tr:nth-child(even){
                background-color: #E1E1E1;
            }
       </style>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script type="text/javascript">
           var app=angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               $scope.goods=[{
                   name:"云南白药",
                   num:100,
                   origin:"云南",
                   price:19.9,
                   "date":1471120093221,
               },{
                   name:"999感冒灵",
                   num:30,
                   origin:"北京",
                   price:12.5,
                   "date":1471120093221,
               },{
                   name:"感康",
                   num:20,
                   origin:"河北",
                   price:16.6,
                   "date":1473120093221,
               }];
               $scope.show=function(){
                   if($scope.goods.length>0){
                       return true;
                   }else{
                       return false;
                   }
               }
               $scope.del=function(name){
                   for(index in $scope.goods){7
                       if($scope.goods[index].name==name){
                           $scope.goods.splice(index,1);
                           alert("确定删除吗？");
                           alert("删除成功");
                       }
                   }
               }
               //入库
               $scope.isshow=false;
               $scope.isif=function(){
                   if($scope.isshow){
                       $scope.isshow=false;
                   }else{
                       $scope.isshow=true;
                   }
               }
               //添加
               $scope.newName="";
               $scope.newPrice="";
               $scope.newNum="";
               $scope.newOrigin="";
               $scope.add=function(){
                   var add={
                       name:$scope.newName,
                       price:$scope.newPrice,
                       num:$scope.newNum,
                       origin:$scope.newOrigin,
                       "date":new Date()
                   };
                   $scope.goods.push(add);
               }
           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h3>商品库存管理系统</h3>
           <input id="in" type="text" placeholder="输入关键字搜索..." ng-model="find"/>
           <img src="img/10_03.jpg"/>
           <select id="se" ng-model="sel">
               <option value="">--选择排序--</option>
               <option value="num">按货物数量正序排列</option>
               <option value="-num" selected="selected">按货物数量倒序排列</option>
               <option value="date">按入库时间正序排列</option>
               <option value="-date">按入库时间倒序排列</option>
           </select>
           <button id="bu" ng-click="isif()">入库</button>
           <table id="table" border="1px solid black" cellspacing="0" cellpadding="5" ng-show="show()">
               <tr style="background: #999999;">
                   <td>货物名称</td>
                   <td>货物数量</td>
                   <td>货物产地</td>
                   <td>货物单价</td>
                   <td>货物入库日期</td>
                   <td>操作</td>
               </tr>
               <tr ng-repeat="g in goods | filter:find | orderBy:sel">
                   <td>{{g.name}}</td>
                   <td>{{g.num}}</td>
                   <td>{{g.origin}}</td>
                   <td>{{g.price | currency:"￥:"}}</td>
                   <td>{{g.date | date:"yyyy-MM-dd HH:mm:ss"}}</td>
                   <td><button ng-click="del(g.name)">删除</button></td>
               </tr>
           </table>
           <table style="margin-top:20px ;" cellpadding="5" ng-show="isshow">
               <tr>
                   <td>商品名称</td>
                   <td><input type="text" ng-model="newName"/></td>
               </tr>
               <tr>
                   <td>商品单价</td>
                   <td><input type="text" ng-model="newPrice"/></td>
               </tr>
               <tr>
                   <td>商品数量</td>
                   <td><input type="text" ng-model="newNum"/></td>
               </tr>
               <tr>
                   <td>商品产地</td>
                   <td><input type="text" ng-model="newOrigin"/></td>
               </tr>
               <tr style="text-align: center;">
                   <td colspan="2"><input type="button" value="添加" ng-click="add()"/></td>
               </tr>
           </table>
       </center>
   </body>
</html>