AngularJS关键字查询

来源：互联网发布：修改表结构的sql语句编辑：程序博客网时间：2024/05/17 21:48

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

   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h3>商品库存管理系统</h3>
           <div>
           <input type="text" placeholder="请输入关键词搜索" ng-model="serch"/>
              <select ng-model="order" ng-change="selectAll()">
               <option value="num">按货物数量正序排序</option>
               <option value="-num">按货物数量反序排序</option>
               <option value="datae">按货物入库时间正序排序</option>
               <option value="-datae">按货物入库时间反序排序</option>
           </select>
           <button style="background:#99FF00; margin-left: 100px;" ng-click="tian">入库</button>
           <input type="button" value="批量删除" id="piliang" ng-click="pi()" />
           </div>
           <table border="1" cellpadding="10px" cellspacing="0">
               <thead>
                   <tr>
                   <td>货物名称</td>
                   <td>货物数量</td>
                   <td>货物产地</td>
                   <td>货物单价</td>
                   <td>货物入库时间日期</td>
                   <td>操作</td>
                   </tr>
               </thead>
               <body>
                   <tr ng-repeat="us in goods | filter:serch | orderBy:(orderFlag+orderLine) ">
                       <td>{{us.name}}</td>
                       <td>{{us.num}}</td>
                       <td>{{us.address}}</td>
                       <td>{{us.price|currency:"￥"}}</td>
                       <td>{{us.datae}}</td>
                       <td><button ng-click="del(us.name)">删除</button></td>
                   </tr>
               </body>
           </table>
       </center>
       <script type="text/javascript">
           var mo=angular.module("myApp",[]);
           mo.controller("myCtrl",function($scope){
              $scope.goods=[{
                             "name":"云南白药",
                             "num":100,
                             "address":"云南",
                             "price":19.9,
                             "datae":"2017-11-20 09:32:21"
                          },{
                             "name":"999感冒灵",
                             "num":30,
                             "address":"北京",
                             "price":12.5,
                             "datae":"2017-11-20 10:32:21"
                          },{
                             "name":"感康",
                             "num":20,
                             "address":"河北",
                             "price":16.6,
                             "datae":"2017-11-20 11:11:11"
                          }];


                    //删除
                    $scope.del=function(delName){
                       for(index in $scope.goods){
                           if(delName==$scope.goods[index].name){
                               if(window.confirm("确实要删除吗?")){
                                   if(window.confirm("删除成功")){
                                   $scope.goods.splice(index,1);
                                   }
                               }
                           }else{

                           }
                       }
                    }

              //定义下拉菜单的排序
              $scope.order;
              $scope.selectAll=function(){
                 if($scope.order=="num"){
                     $scope.orderFlag=""
                     $scope.orderLine="num"
                 }else if($scope.order=="-num"){
                     $scope.orderFlag="-"
                     $scope.orderLine="num"
                 }else if($scope.order=="datae"){
                     $scope.orderFlag=""
                     $scope.orderLine="datae"
                 }else if($scope.order=="-datae"){
                     $scope.orderFlag="-"
                     $scope.orderLine="datae"
                    }
              }

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

阅读全文

0 0