状态改变

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
       <center>

       <div>
           <input type="button" name="" id="" value="新增订单" ng-click="addshow=!addshow"/>
           <input type="button" name="" id="" value="批量删除" ng-click="plsc()"/>
           <input type="text" name="" id="" value="" placeholder="按商品名查询" ng-model="mohu"/>
           <input type="text" name="" id="" value="" placeholder="按手机号查询" ng-model="mohu1"/>
           <select ng-model="order">
               <option value="已发货">已发货</option>
               <option value="未发货">未发货</option>`
           </select>

       </div>

       <table border="1" cellspacing="0" cellpadding="1">
           <tr>
               <th><input type="checkbox" name="" id="" value="" ng-model="cb"/></th>
               <th>
                   id
                   <input type="button" name="" id="" value="^" ng-click="idorder()"/>
               </th>

               <th>商品名</th>
               <th>用户名</th>
               <th>手机号</th>

               <th>
                   价格
                   <input type="button" name="" id="" value="^" ng-click="priceorder()"/>
                   <input type="button" name="" id="" value="▼" ng-click="pri()"/>
               </th>
               <th>城市</th>

               <th>
                   下单时间
                   <input type="button" name="" id="" value="^" ng-click="timeorder()"/>
               </th>
               <th>状态</th>
           </tr>




           <tr ng-repeat="x in shops|filter:{gname:mohu,price:mohu1,state:order}|orderBy:pai">

               <td><input type="checkbox" name="" id="" value="{{x.id}}" ng-model="cb"/></td> 

               <td>{{x.id}}</td>
               <td>{{x.gname}}</td>
               <td>{{x.uname}}</td>
               <td>{{x.tel}}</td>
               <td>{{x.price}}</td>
               <td>{{x.provice+"-"+x.city}}</td>
               <td>{{x.regdate}}</td>

               <td>
                        
                   <span ng-show="x.state=='已发货'" style="background-color: yellow;">{{x.state}}</span>

                   <input type="button" ng-show="x.state=='未发货'" style="background-color: red;" value="{{x.state}}" ng-click="x.state='已发货'"/>
               </td>
           </tr>
       </table>


       <div ng-show="addshow">
           id:<input type="text" id="" value="" ng-model="id" /><br />
           商品名:<input type="text" id="" value="" ng-model="gname" /><br />
           用户名:<input type="text" id="" value="" ng-model="uname" /><br />
           手机号:<input type="text" id="" value="" ng-model="tel" /><br />
           价格:<input type="text" id="" value="" ng-model="price" /><br />
           <select name="" ng-model="provice" id="address">
               <option value="辽宁">辽宁</option>
               <option value="安徽">安徽</option>
               <option value="北京">北京</option>
           </select>
           <select name="" ng-model="city" id="address1">
               <option value=""></option>
           </select>

           <input type="button" name="" id="" value="保存" ng-click="add()"/>
       </div>

       </center>
       <script type="text/javascript">

           var app =angular.module("myapp",[]);
           app.controller("myctrl",function($scope,$http){

               $http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
               .then(function(response){
                   $scope.shops=response.data;

               })


               //id排序
               $scope.idorder=function(){

                   $scope.pai="id";
               }

               //价格排序
               $scope.priceorder=function(){

                   $scope.pai="price";
               }
               $scope.pri=function(){

                   $scope.pai="-price";
               }


               //时间排序
               $scope.timeorder=function(){
                   $scope.pai="regdate";
               }



               //添加
               $scope.add=function(){

                   var newshops={};

               newshops.id=$scope.id;
               newshops.gname=$scope.gname;
               newshops.uname=$scope.uname;
               newshops.tel=$scope.tel;
               newshops.price=$scope.price;
               newshops.provice=$scope.provice+$scope.address1;
                   $scope.shops.push(newshops);
               }



               //二级联动
           $("#address").change(function(){

               var ad = $(this).val();
               if(ad=="辽宁"){

                   $("#address1").empty();
                   $("#address1").append("<option value='大连' selected='selected'>大连</option>");
                   $scope.address1="大连";

               }else if(ad=="安徽"){

                   $("#address1").empty();
                   $("#address1").append("<option value='颍上' selected='selected'>颍上</option>");
                   $scope.address1="颍上";

               }else if(ad=="北京"){

                   $("#address1").empty();
                   $("#address1").append("<option value='海淀区' selected='selected'>海淀区</option>");
                   $scope.address1="海淀区";
               }

           })




           //批量删除
           $scope.plsc=function(){

               var cbs=$("input:checked");
               if(cbs.length==0){

                   alert("请选中数据在删除");

               }else{

                   var a =confirm("确定删除吗");

                   if(a){ //if(a)是代表确定删除的状态那么在这个确定的状态里进行删除操作

                       cbs.each(function(){

                           for (var i = 0; i < $scope.shops.length; i++) {
                               if($scope.shops[i].id==$(this).val()){   //$(this).val()代表多个选中的值或者多个复选框   不单单是某一个值或者某一个复选框
                                   $scope.shops.splice(i,1);
                                   break;
                               }
                           }
                       })
                   }
               }

           }



           })





       </script>


   </body>
</html>

猜你喜欢