angularJs select两级联动

下拉框的默认选项一般是可以通过使用ng-init指令或者在控制器中对select的model值进行赋值来达到这个目的的。
关于使用ng-repeat还是ng-options的选择，当我们的下拉列表循环的只是一些简单的字符串或者数字的时候，使用这两个指令都是可以的;但是当我们下拉列表循环的是一些比较复杂的数据并且还有一些附带的其它要求的时候，我们应该使用ng-options。

使用ng-options指令对下拉列表的值进行循环，然后使用ng-init对select的model进行初始化。

html代码

<div ng-app="myApp" ng-controller="myCtrl">
    <p>付费方式:</p>
    <div>
        <select ng-init="select1=payWayList[0]" ng-model="select1" ng-change="payWayCHange()" ng-options="item.amode for item in payWayList">
        </select>
        <select  ng-init="select2=select1.gnum[0]" ng-model="select2" ng-options="data.payTime for data in select1.gnum">
        </select>
    </div>
</div>

我们使用ng-options指令对下拉列表的值进行循环，然后使用ng-init对select的model进行初始化。

js

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {

        //json 数据
        $scope.payWayList = [
            {
                "amode":"按月",
                "gnum":[
                    {
                        "payTime":"购置月末",
                        "price":"0"
                    },
                    {
                        "payTime":"1个月",
                        "price":"1"
                    },
                    {
                        "payTime":"2个月",
                        "price":"2"
                    },
                    {
                        "payTime":"3个月",
                        "price":"3"
                    },
                    {
                        "payTime":"4个月",
                        "price":"4"
                    },
                    {
                        "payTime":"5个月",
                        "price":"5"
                    },
                    {
                        "payTime":"6个月",
                        "price":"6"
                    },
                    {
                        "payTime":"7个月",
                        "price":"7"
                    },
                    {
                        "payTime":"8个月",
                        "price":"8"
                    },
                    {
                        "payTime":"9个月",
                        "price":"9"
                    },
                    {
                        "payTime":"10个月",
                        "price":"10"
                    }
                ]
            },
            {
                "amode":"按年",
                "gnum":[
                    {
                        "payTime":"1年",
                        "price":"10"
                    },
                    {
                        "payTime":"2年",
                        "price":"19"
                    },
                    {
                        "payTime":"3年",
                        "price":"27"
                    }
                ]
            },
            {
                "amode":"按需",
                "gnum":[
                    {
                        "payTime":"1小时",
                        "price":"0.00138889"
                    }
                ]
            }
        ];

        $scope.gnumList = "";
        //父级绑定事件改变seelct2的值
        $scope.payWayCHange = function(select1){
            $scope.select2=$scope.select1.gnum[0];
        };


    });

效果如下：