分享一个AngularJS写的联动菜单
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Angular做联动菜单</title>
</head>
<script src="//cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
<body>
<h1>使用Angular做联动菜单</h1>
<form action="" ng-app="liandong" ng-controller="con">
<select ng-change="change()" ng-model="pid">
<option value="{{$index}}" ng-repeat="pro in pros">{{pro}}</option>
</select>
<select>
<option value="" ng-repeat="city in citys">{{city}}</option>
</select>
</form>
</body>
<script>
var app = angular.module('liandong',[]);
app.controller('con',function($scope){
var pros = ['北京','安徽'];//省的数据
var maps = [
['朝阳','昌平','沙河'],
['黄山','阜阳','淮南']
];//市的数据
$scope.pros = pros;//设置作用域中的省数据
$scope.change = function(){
$scope.citys = maps[this.pid];//设置作用域中市的数据
}
});
</script>
</html>页面加载的时候会显示出省的数据，因为我们给作用域中设置了pros变量，然后在option中使用ng-repeat属性循环pros的数据，显示出北京、安徽；还有option标签的value值中使用到了{{$index}}，这是使用pros数组的下标，然后当改变select的值时响应ng-change事件，调用$scope.change方法，然后给作用域设置了一个citys变量，然后在市的select下拉框中的option标签下使用ng-repeat属性循环citys数据。