周考练习1_添加_查询_排序

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
       
       <style type="text/css">
       }
       </style>
       <script type="text/javascript">
           var app = angular.module("myapp", []).controller("myctrl", function($scope) {
               //1.初始化下拉选项的数据
               $scope.order = ["请选择排序方式", "按照库存数量正序", "按照库存数量倒序", "按照货品单价正序", "按照货品单价倒序"];
               //2.定义状态值--隐藏
               $scope.flag = false;
               //3.定义表格内部数据
               $scope.goods = [{
                   "name": "云南白药",
                   "num": 100,
                   "produce": "云南",
                   "price": "19.9",
                   "date1": "1371120093221"
               }, {
                   "name": "999感冒灵",
                   "num": 30,
                   "produce": "北京",
                   "price": "12.5",
                   "date1": "1371399948599"
               }, {
                   "name": "感康",
                   "num": 20,
                   "produce": "河北",
                   "price": "16.6",
                   "date1": "1371394846499"
               }];
               //点击提交按钮,,,获取输入的内容
               $scope.save = function() {
                   //清空输入框的数据
                   $(".ipt").val("");
                   //获取输入的内容
                   var name = $scope.name;
                   var num = $scope.num;
                   var produce = $scope.produce;
                   var price = $scope.price;
                   //alert(name+"-"+num+"-"+produce+"-"+price);
                   var date = new Date();
                   var y = date.getFullYear();
                   var m = date.getMonth();
                   var d = date.getDay();
                   var h = date.getHours();
                   var mm = date.getMinutes();
                   var s = date.getSeconds();
                   var date1 = y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s;
                   //添加到表格数据中
                   $scope.goods.push({
                       name: name,
                       num: num,
                       produce: produce,
                       price: price,
                       date1: date1
                   })
                   //隐藏表单
                   $scope.flag = false;
               }
               //删除
               $scope.del = function(position) {
                   $scope.goods.splice(position, 1);
               }
               //排序
               $scope.change = function() {
                   //获取到下拉选项的内容
                   var value = $scope.selectName;
                   //alert(value);
                   //可以根据这个内容进行判断
                   switch(value) {
                       case "按照库存数量正序":
                           $scope.goods.sort(function(a, b) {
                               return a.num - b.num;
                           });
                           break;
                       case "按照库存数量倒序":
                       $scope.goods.sort(function(a, b) {
                               return b.num - a.num;
                           });
                           break;
                       case "按照货品单价正序":
                       $scope.goods.sort(function(a, b) {
                               return a.price - b.price;
                           });
                           break;
                       case "按照货品单价倒序":
                       $scope.goods.sort(function(a, b) {
                               return b.price - a.price;
                           });
                           break;
                       default:
                           break;
                   }
               }
           })
       </script>
   </head>

   <body ng-app="myapp" ng-controller="myctrl">
       <h2>商品入库管理</h2>
       <div class="tab">
           <input type="text" placeholder="请输入关键字" ng-model="selectValue" />
           <select ng-model="selectName" ng-init="selectName=order[0]" ng-options="s for s in order" ng-change="change()">{{s}}</select>
           <button ng-click="flag=true">入库</button>
       </div>
       <table border="1px" cellspacing="0" cellpadding="0">
           <tr>
               <td>名称</td>
               <td>数量</td>
               <td>产地</td>
               <td>价格</td>
               <td>入库时间</td>
               <td>操作</td>
           </tr>
           <tr ng-repeat="s in goods|filter:selectValue">
               <td>{{s.name}}</td>
               <td>{{s.num}}</td>
               <td>{{s.produce}}</td>
               <td>{{s.price|currency:"¥"}}</td>
               <td>{{s.date1|date:"yyyy-MM-dd hh-mm-ss"}}</td>
               <td><button ng-click="del($index)">删除</button></td>
           </tr>
       </table>
       <form ng-show="flag">
           名称:<input type="text" ng-model="name" class="ipt" /><br /> 数量:
           <input type="text" ng-model="num" class="ipt" /><br /> 产地:
           <input type="text" ng-model="produce" class="ipt" /><br /> 价格:
           <input type="text" ng-model="price" class="ipt" /><br /> 入库时间:
           <input type="text" ng-model="date" class="ipt" /><br />
           <button ng-click="save()">提交</button>
       </form>
   </body>

</html>

周考练习1_添加_查询_排序

猜你喜欢