使用angular实现二级联动

最新推荐文章于 2020-05-29 17:09:37 发布

原创最新推荐文章于 2020-05-29 17:09:37 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的省份与城市下拉菜单的示例，展示了如何通过控制器定义数据结构，并利用指令来动态显示选项。该示例采用AngularJS模块和控制器进行数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myControl",function($scope,$http){
$scope.provinces = [
{
"pro": "北京",
"children": ["西二旗", "上地"]
},
{
"pro": "河北",
"children": ["石家庄", "邯郸"]
}
];

                            //请求外部json

                            /*

$http.get("provinces.json").then(function(res){
$scope.provinces =res.data;
});

                            */

});
</script>
</head>

<body ng-app="myApp" ng-controller="myControl" >
省份:<select ng-options=" p.pro for p in provinces" ng-model="s1">

</select>
城市:<select ng-options="c for c in s1.children" ng-model="s2">

</select>
</body>
</html>