angular 之二级联动（省市联动）

最新推荐文章于 2019-10-11 10:56:31 发布

原创最新推荐文章于 2019-10-11 10:56:31 发布 · 770 阅读

0 ·

CC 4.0 BY-SA版权

angular 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的省市区三级联动选择器的示例代码。该示例展示了如何通过AngularJS的模块、控制器及双向数据绑定等功能来构建动态下拉选择器，并在用户选择省份时自动更新对应的城市和区域选项。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script>
           var app = angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               $scope.proList =[
                    {
                        "amode":"河南",
                        "citys":[
                                   {"name":"郑州",
                                   "area":[{"aname":"郑1区"},{"aname":"郑2区"}]
                                   },
                                   {"name":"开封",
                                   "area":[{"aname":"开1区"},{"aname":"开2区"}]
                                   }
                               ]
                    },
                    {
                        "amode":"河北",
                        "citys":[
                                   {"name":"石家庄",
                                   "area":[{"aname":"石1区"},{"aname":"石2区"}]
                                   },
                                   {"name":"邯郸",
                                   "area":[{"aname":"邯1区"},{"aname":"邯2区"}]
                                   }
                        ]
                    }
                ];
                $scope.str="我是一个无用的属性";

               $scope.proChange = function(){
                      $scope.select2 = $scope.select1.citys[0];
                      $scope.select3 = $scope.select2.area[0];
               }
               $scope.cityChange = function(){
                       $scope.select3 = $scope.select2.area[0];
               }
           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">

        <div>
           <select style="width: 120px;" ng-init="select1=proList[0]" ng-model="select1" ng-change="proChange();" ng-options="item.amode for item in proList"></select>
           <select style="width: 120px;" ng-init="select2=select1.citys[0]" ng-change="cityChange();" ng-model="select2" ng-options="data1.name for data1 in select1.citys"></select>
           <select style="width: 120px;" ng-init="select3=select2.area[0]" ng-model="select3" ng-options="a.aname for a in select2.area"></select>
        </div>
   </body>
</html>