AngularJS尝鲜——联动菜单

分享一个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数据。