angularJs select两级联动

最新推荐文章于 2024-09-05 19:36:27 发布

sx_lidan

最新推荐文章于 2024-09-05 19:36:27 发布

阅读量7.1k

点赞数

分类专栏： AngularJs 文章标签： angularjs select 两级联动

本文链接：https://blog.csdn.net/sx_lidan/article/details/70920357

版权

AngularJs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

下拉框的默认选项一般是可以通过使用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进行初始化。

    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];
        };


    });