二级联动

最新推荐文章于 2019-10-29 08:49:17 发布
马龙德兰胜
最新推荐文章于 2019-10-29 08:49:17 发布
阅读量91
点赞数
本文链接：https://blog.csdn.net/qq_42045179/article/details/80164210
版权
<!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.11.1.js" type="text/javascript" charset="utf-8"></script>  
        <script type="text/javascript">  
            //初始化一个id值---全局变量  
            var i = 2000;  
            var app = angular.module("myapp", []).controller("myctrl", function($scope, $http) {  
                //1.获取展示的订单数据  
                $http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest").then(function(success) {  
                    $scope.goods = success.data;  
                    //alert($scope.goods.length);  
                })  
                //2.获取二级联动的数据  
                $http.get("addr.json").then(function(success) {  
                    $scope.addr = success.data;  
                    //alert($scope.addr.length);  
                })  
                //3.声明状态值,,,记录添加表单的显示和隐藏  
                $scope.flag_add = false;  
                //改变省份,,,切换里面的城市  
                $scope.changeProvince = function() {  
                    $scope.select_city = $scope.select_province.citys[0];  
                }  
                //4.添加数据---验证信息  
                $scope.save = function() {  
                    i++;  
                    //4.0清空提示信息  
                    $(".t_span").html("");  
                    //4.1获取到输入的值  
                    var gname = $scope.gname;  
                    var uname = $scope.uname;  
                    var tel = $scope.tel;  
                    var price = $scope.price;  
                    var province = $scope.select_province.province;  
                    var city = $scope.select_city.city;  
                    //alert(city);  
                    //4.2进行验证  
                    if(gname == null || gname == "") {  
                        $("#gname_span").html("商品名不能为空");  
                        return;  
                    }  
                    if(uname == null || uname == "") {  
                        $("#uname_span").html("用户名不能为空");  
                        return;  
                    }  
                    if(tel == null || tel == "") {  
                        $("#tel_span").html("手机号不能为空");  
                        return;  
                    }  
                    if(price == null || price == "") {  
                        $("#price_span").html("价格不能为空");  
                        return;  
                    }  
                    //4.3添加数据  
                    $scope.goods.push({  
                        id: i,  
                        gname: gname,  
                        uname: uname,  
                        tel: tel,  
                        price: price,  
                        city: city,  
                        regdate: new Date(),  
                        state: "已发货"  
                    })  
                    //4.4隐藏表单  
                    $scope.flag_add = false;  
                }  
                //5.全选,全不选  
                $scope.changeChecked = function() {  
                    for(var i = 0; i < $scope.goods.length; i++) {  
                        $scope.goods[i].check = $scope.ischeck  
                    }  
                }  
                //6.批量删除  
                $scope.delAll = function() {  
                    for(var i = 0; i < $scope.goods.length; i++) {  
                        if($scope.goods[i].check && $scope.goods[i].state == "已发货") {  
                            $scope.goods.splice(i, 1);  
                            i--;  
                        }else{  
                            //如果有未发货被选中,,,点击删除以后,状态值改变成false  
                            $scope.goods[i].check=false;  
                            $scope.ischeck = false;  
                        }  
                    }  
                }  
            })  
        </script>  
    </head>  
  
    <body ng-app="myapp" ng-controller="myctrl">  
        <button ng-click="flag_add=true">新增订单</button>  
        <button ng-click="delAll()">批量删除</button>  
        <input type="text" ng-model="select_name" placeholder="按名称查询" />  
        <input type="text" ng-model="select_tel" placeholder="按手机号查询" />  
        <select ng-model="state">  
            <option value="">---按状态查询---</option>  
            <option value="已">---已发货---</option>  
            <option value="未">---未发货---</option>  
        </select>  
        <table border="1px" cellspacing="0" cellpadding="0" width="800px">  
            <tr>  
                <td><input type="checkbox" ng-change="changeChecked()" ng-model="ischeck" /></td>  
                <td>id<button ng-click="px='id';aa=!aa">排序</button></td>  
                <td>商品名</td>  
                <td>用户名</td>  
                <td>手机号</td>  
                <td>价格<button ng-click="px='price';aa=!aa">排序</button></td>  
                <td>城市</td>  
                <td>下单时间<button ng-click="px='regdate';aa=!aa">排序</button></td>  
                <td>状态</td>  
            </tr>  
            <tr ng-repeat="g in goods|filter:{'gname':select_name,'tel':select_tel,'state':state}|orderBy:px:aa">  
                <td><input type="checkbox" ng-model="g.check" /></td>  
                <td>{{g.id}}</td>  
                <td>{{g.gname}}</td>  
                <td>{{g.uname}}</td>  
                <td>{{g.tel}}</td>  
                <td>{{g.price|currency:"¥"}}</td>  
                <td>{{g.city}}</td>  
                <td>{{g.regdate|date:"MM-dd hh:mm:ss"}}</td>  
                <td>  
                    <span ng-show="g.state=='已发货'" style="background-color: green;">{{g.state}}</span>  
                    <button ng-show="g.state=='未发货'" ng-click="g.state='已发货'" style="background-color: yellow;">{{g.state}}</button>  
                </td>  
            </tr>  
        </table>  
        <form ng-show="flag_add">  
            <fieldset id="">  
                <legend>订单信息</legend>  
                商品名:<input type="text" ng-model="gname" /><span id="gname_span" class="t_span"></span><br /> 用户名:  
                <input type="text" ng-model="uname" /><span id="uname_span" class="t_span"></span><br /> 手机号:  
                <input type="text" ng-model="tel" /><span id="tel_span" class="t_span"></span><br /> 价格:  
                <input type="text" ng-model="price" /><span id="price_span" class="t_span"></span><br /> 城市:  
                <select ng-model="select_province" ng-init="select_province=addr[0]" ng-options="item.province for item in addr" ng-change="changeProvince()"></select>  
                <select ng-model="select_city" ng-init="select_city=select_province.citys[0]" ng-options="item2.city for item2 in select_province.citys"></select><br />  
                <button ng-click="save()">保存</button>  
            </fieldset>  
        </form>  
  
    </body>  
  
</html>
马龙德兰胜
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二级联动

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="../js/angular.min.js"
复制链接

扫一扫