angular的增删查模糊查

最新推荐文章于 2018-03-27 20:37:09 发布

忙着写BUG

最新推荐文章于 2018-03-27 20:37:09 发布

阅读量302

点赞数

本文链接：https://blog.csdn.net/MincingMachine/article/details/78826831

版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/angular.min.js"></script>
       <script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>
       <style type="text/css">
           * {
               margin: 0px auto;
               padding: 0px;
           }

           table tr td {
               text-align: center;
           }

           .true {
               background: greenyellow;
               border: 0px;
               border-radius: 3px;
           }

           .false {
               background: yellow;
               border: 0px;
               border-radius: 3px;
           }
       </style>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       <div style="width: 800px;">
           <button ng-click="xinzeng()" style="background-color: #5CD6FF;border-radius: 5px;">新增订单</button>
           <button style="background-color: #5CD6FF;border-radius: 5px;">批量删除</button>

           <input style="margin-left: 80px;" type="text" placeholder="按商品名称查询" ng-keydown="gname_cha($event)" ng-model="gname" />
           <input type="text" placeholder="按手机号查询" ng-keydown="tel_cha($event)" ng-model="call" />

           <select ng-change="isfahuo()" ng-model="fahuo" ng-init="fahuo='--按状态查询--'">
               <option>--按状态查询--</option>
               <option>已发货</option>
               <option>未发货</option>
           </select>
       </div>

       <table border="1px" cellpadding="0px" cellspacing="0px" style="margin-top: 10px;" width="800px">
           <tr>
               <td><input type="checkbox" /></td>
               <td>id<button style="background-color: #5CD6FF;border-radius: 5px;" ng-click="pai1()">排序</button></td>
               <td>商品名</td>
               <td>用户名</td>
               <td>手机号</td>
               <td>价格<button style="background-color: #5CD6FF;border-radius: 5px;" ng-click="pai2()">排序</button></td>
               <td>城市</td>
               <td>下单时间<button style="background-color: #5CD6FF;border-radius: 5px;" ng-click="pai3()">排序</button></td>
               <td>状态</td>
           </tr>
           <tr ng-repeat="s in goods">
               <td><input type="checkbox" /></td>
               <td>{{s.id}}</td>
               <td>{{s.shopname}}</td>
               <td>{{s.username}}</td>
               <td>{{s.tel}}</td>
               <td>{{s.price |currency:"￥:"}}</td>
               <td>{{s.address}}</td>
               <td>{{s.time| date:"yyyy-MM-dd hh:mm:ss"}}</td>
               <td><input type="button" value="{{s.state | myFilter}}" class="{{s.state}}" ng-click="fahuo1($index)" /></td>
           </tr>
       </table>

       <fieldset style="margin-top: 50px;" ng-show="xs" style="width: 800px;">
           <legend>添加订单信息</legend>
           <table>
               <tr>
                   <td>商品名</td>
                   <td><input type="text" ng-model="shopname" /></td>
                   <td></td>
               </tr>
               <tr>
                   <td>用户名</td>
                   <td><input type="text" ng-model="username" /></td>
                   <td></td>
               </tr>
               <tr>
                   <td>手机号</td>
                   <td><input type="text" ng-model="tel" /></td>
                   <td></td>
               </tr>
               <tr>
                   <td>下单时间</td>
                   <td><input type="date" ng-model="data" /></td>
                   <td></td>
               </tr>
               <tr>
                   <td>价格为</td>
                   <td><input type="text" ng-model="price" /></td>
                   <td></td>
               </tr>

               <tr>
                   <td>城市</td>
                   <td colspan="2">
                       <select ng-model="age">
                           <option ng-repeat="a in city">{{a}}</option>

                       </select>
                   </td>

               </tr>
               <tr>
                   <td>状态为</td>
                   <td>
                       <input type="text" ng-model="state" />
                   </td>

               </tr>

               <tr>
                   <td colspan="3"><input ng-click="add()" type="button" value="保存" /></td>

               </tr>
           </table>

       </fieldset>

   </body>
   <script type="text/javascript">
       var mo = angular.module("myApp", []);
       mo.controller("myCtrl", function($scope) {
           $scope.city = ["北京", "天津", "南京", "东京"];

           $scope.shopping = [{
                   "flag": false,
                   "id": 2001,
                   "shopname": "iPhoneX",
                   "username": "张三",
                   "tel": "13620134567",
                   "price": 8699,
                   "address": "北京",
                   "time": "11-23 10:00:00",
                   "state": false
               },
               {
                   "flag": false,
                   "id": 3006,
                   "shopname": "iPhone18",
                   "username": "李四",
                   "tel": "13620137891",
                   "price": 6999,
                   "address": "山西",
                   "time": "12-12 10:00:00",
                   "state": false
               },
               {
                   "flag": false,
                   "id": 3003,
                   "shopname": "华为尊爵版",
                   "username": "张立超",
                   "tel": "12345678910",
                   "price": 13999,
                   "address": "北京",
                   "time": "11-23 10:00:00",
                   "state": false
               }, {
                   "flag": false,
                   "id": 2001,
                   "shopname": "小米13",
                   "username": "郑鹏飞",
                   "tel": "13674128960",
                   "price": 9999,
                   "address": "河南",
                   "time": "11-23 10:00:00",
                   "state": false
               }
           ]
           $scope.goods = $scope.shopping;
           /*$scope.fahuo1 = function($index) {

               $scope.shopping[$index].state = true;
           }
           $scope.xinzeng = function() {
               $scope.xs = true;
           }

           $scope.add = function() {

               var name1 = $scope.shopname;
               var name2 = $scope.username;
               var name3 = $scope.tel;
               var name4 = $scope.price;
               var name5 = $scope.age;
               var name6 = $scope.data;
               var name7 = $scope.state;
               if(name1 == undefined && name2 == undefined && name3 == undefined && name4 == undefined && name5 == undefined && name6 == undefined && name7 == undefined) {
                   alert("判断有问题")
               } else {

                   var random = Math.random();
                   var max = 10000;
                   var min = 1000;
                   var s = random * (max) % (max - min + 1) + min;

                   var ii = parseInt(s)
                   var shop = {
                       "id": ii,
                       "shopname": $scope.shopname,
                       "username": $scope.username,
                       "tel": $scope.tel,
                       "price": $scope.price,
                       "address": $scope.age,
                       "time": $scope.data,
                   }

                   $scope.goods.push(shop);
                   $scope.xs = false;
               }

           }

           $scope.gname_cha = function($event) {

               var arr_temp = []; //定义临时数组
               var keyCode = $event.keyCode;
               if(keyCode == 13) {
                   //遍历数组查询
                   for(var i = 0; i < $scope.shopping.length; i++) {
                       if($scope.shopping[i].shopname.indexOf($scope.gname) != -1) {
                           arr_temp.push($scope.shopping[i]);
                       }
                   }
                   //赋值
                   $scope.goods = arr_temp;
               }
           }

           $scope.tel_cha = function($event) {

               var arr_temp = []; //定义临时数组
               var keyCode = $event.keyCode;
               if(keyCode == 13) {

                   //遍历数组查询
                   for(var i = 0; i < $scope.shopping.length; i++) {

                       var call = $scope.shopping[i].tel.toString();

                       if(call.indexOf($scope.call) != -1) {
                           arr_temp.push($scope.shopping[i]);
                       }
                   }
                   //赋值
                   $scope.goods = arr_temp;
               }
           }

           $scope.isfahuo = function() {
               alert("aaa")
               var map = [];
               var f = $scope.fahuo;
               if(f == "已发货") {
                   for(var i = 0; i < $scope.shopping.length; i++) {
                       var f1 = $scope.shopping[i].state;
                       if(f1) {
                           map.push($scope.shopping[i]);
                       }
                   }
               } else {
                   for(var i = 0; i < $scope.shopping.length; i++) {
                       var f1 = $scope.shopping[i].state;
                       if(f1 == false) {
                           map.push($scope.shopping[i]);
                       }
                   }
               }

               $scope.goods = map;
           }

           var falg_id = true;
           $scope.pai1 = function() {
               if(falg_id) {
                   $scope.shopping.sort(function(a, b) {
                       return a.id - b.id;
                   })
               } else {
                   $scope.shopping.sort(function(a, b) {
                       return b.id - a.id;
                   })
               }
               falg_id = !falg_id;
               $scope.goods = $scope.shopping;
           }
           var falg_price = true;
           $scope.pai2 = function() {
               if(falg_id) {
                   $scope.shopping.sort(function(a, b) {
                       return a.price - b.price;
                   })
               } else {
                   $scope.shopping.sort(function(a, b) {
                       return b.price - a.price;
                   })
               }
               falg_price = !falg_price;
               $scope.goods = $scope.shopping;
           }

           var falg_time = true;
           $scope.pai3 = function() {
               if(falg_time) {
                   $scope.shopping.sort(function(a, b) {
                       return a.time - b.time;
                   })
               } else {
                   $scope.shopping.sort(function(a, b) {
                       return b.time - a.time;
                   })
               }
               falg_time = !falg_time;
               $scope.goods = $scope.shopping;
           }*/
       })


       mo.filter("myFilter", function() {
           return function(input) {
               if(input) {
                   return "已发货"
               } else {
                   return "未发货"
               }
               return input;
           }
       })
   </script>

</html>