二级联动的用法

<!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-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
           <style type="text/css">
               .whiteline{
               background-color: gainsboro;
               }
               .grayline{
               background-color: white;
               }
               .qw{
                   /*float: right;*/
                   margin-left: 620px;
                   width: 500px;
                   height: 20px;
                   /*background-color: red;*/
               }
           </style>

   </head>
   <body ng-app="myapp" ng-controller="myctrl">
       <center>
       <div>
           商品名称:<input type="" ng-model="name" id="name"><span id="uname"></span><br />
           商品价格:<input type="" ng-model="price" id="price"><span id="uprice"></span><br />
           商品数量:<input type="" ng-model="num" id="num"><span id="unum"></span><br />
           发货地址:<select id="addre" ng-model="addres">
               <option value="河南">河南</option>
               <option value="河北">河北</option>
               <option value="北京">北京</option>

           </select>--
           <select id="addre2" ng-model="addres22">
               <option value='郑州' selected="selected" >郑州</option>
           </select><br /><br />
           <input type="button" value="确认添加" ng-click="add()"/><br /><hr />
           <div class="qw"><input type="button" value="批量删除" ng-click="plc()"></div><br />
       </div>

           <div>
               <table border="1" cellpadding="0" cellspacing="1" style="width: 38%;">
                   <tr style="background-color: gray;">
                       <th><input type="checkbox" ng-model="eee"></th>
                       <th>商品名称</th>
                       <th>商品价格</th>
                       <th>库存数量</th>
                       <th>库存商品总计</th>
                       <th>发货地址</th>

                   </tr>
                   <tr ng-repeat="x in shops" class="{{$index%2==0?'whiteline':'grayline'}}" style="text-align: center;">
                       <td><input type="checkbox" ng-model="eee" value="{{x.name}}"></td>
                       <td>{{x.name}}</td>
                       <td>{{x.price}}</td>
                       <td>{{x.num}}</td>
                       <td>{{(x.price*x.num)}}</td>
                       <td>{{x.addre}}</td>


                   </tr>

               </table>

           </div>
       </center>
       <script type="text/javascript">
           var app = angular.module("myapp",[]);
           app.controller("myctrl",function($scope){
               $scope.addres="河南";
               $scope.addres22="郑州";
               $scope.shops=[{name:"罗马皮鞋",price:100,num:10,count:1000,addre:"河南-郑州"},{name:"香奈儿",price:500,num:10,count:5000,addre:"河南-郑州"},{name:"oppoR15",price:2599,num:10,count:25990,addre:"山西-太原"},{name:"vivoX20",price:300,num:2,count:6000,addre:"北京-西二旗"},]

               $scope.plc=function(){

                   var cbs=$("input:checked");
                   alert("您确定要删除吗?");
                   cbs.each(function(){
                       for (var i = 0; i < $scope.shops.length; i++) {
                           if(   $scope.shops[i].name==$(this).val()){
                               $scope.shops.splice(i,1);break;
                           }
                       }

                   });

               }
               //名字验证
               $("#name").blur(function(){
                   var v =$("#name").val();
                   if(v==""){
                       $("#uname").html("商品名称非空验证");
                       $("#uname").css("color","red");

                   }

               });
               //非空验证
               $("#price").blur(function(){
                   var v =$("#price").val();
                   if(v<0){
                       $("#uprice").html("商品价格大于0");
                       $("#uprice").css("color","red");
                   }

               });
               //商品数量大于0
               $("#num").blur(function(){
                   var v =$("#num").val();
                   if(v<0){
                       $("#unum").html("商品数量大于0")
                       $("#unum").css("color","red");
                   }

               });

               $scope.add=function(){
                   var newadd=[];
                   newadd.name=$scope.name;
                   newadd.price=$scope.price;
                   newadd.num=$scope.num;
                   newadd.addre=$scope.addres+$scope.addres22;

                   $scope.shops.push(newadd);

                   //清空添加完之后的数据
                   $scope.name="";
                   $scope.price="";
                   $scope.num="";

               }
               $("#addre").change(function(){
                   var ad = $(this).val();
                   if(ad=="河南"){
                       $("#addre2").empty();
                       $("#addre2").append("<option value='开封' selected='selected'>开封</option>");
                       $scope.addres22="开封";

                   }else if(ad=="北京"){
                       $("#addre2").empty();
                       $("#addre2").append("<option value='西二旗' selected='selected'>西二旗</option>");
                       $scope.addres22="西二旗";

                   }else if(ad=="河北"){
                       $("#addre2").empty();
                       $("#addre2").append("<option value='石家庄' selected='selected'>石家庄</option>");
                       $scope.addres22="石家庄";

                   }
               })
           })
       </script>


   </body>
</html>

猜你喜欢