多级下拉列表（angular）

最新推荐文章于 2024-09-25 08:29:39 发布

转载最新推荐文章于 2024-09-25 08:29:39 发布 · 2k 阅读

angular 专栏收录该内容

1 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用AngularJS实现两个级联的下拉菜单。第一个下拉菜单用于选择人物，第二个则根据所选人物动态显示其兴趣爱好。此示例涉及AngularJS的数据绑定和指令等关键技术。

<img src="https://img-blog.youkuaiyun.com/20151010170527121?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

<div ng-controller="MainCtrl">
    <select ng-model="selectedPerson" ng-options="obj.name for obj in people"></select>
    <select ng-model="selectedGenre">
        <option ng-repeat="label in people[selectedPerson.id].interest">{{label}}</option>
    </select>
</div>











var app = angular.module('NameApp', ['ngAnimate']);
app.controller("MainCtrl",function($scope){
    $scope.people = [
                    {
                        id: 0,
                        name:'乔乐',
                        interest: [
                            '爬山',
                            '游泳',
                            '旅游',
                            '美食'
                        ]
                    },
                    {
                        id: 1,
                        name:'Chris',
                        interest: [
                            '音乐',
                            '美食',
                            'Coffee',
                            '看书'
                        ]
                    },
                    {
                        id: 2,
                        name:'魏瑞',
                        interest: [
                            '音乐',
                            '电影',
                            '中国好声音',
                            '爸爸去哪了',
                            '非常静距离'
                        ]
                    },
                    {
                        id: 3,
                        name:'小飞子',
                        interest: [
                            '游泳',
                            '游戏',
                            '宅家里'
                        ]
                    }
                ];
});