首页 > 代码库 > angularjs---select使用---默认值及联动

angularjs---select使用---默认值及联动

技术分享

技术分享

 

 技术分享

 

技术分享

 

 

代码

 

一. select设置默认显示内容&&获取下拉框显示内容.HTML<div>  <select ng-model="current_option" ng-options="option.key for option in option_array"> </select></div>JS$(function() {    /**** 设置下拉框显示内容 ****/    $scope.option_array = [        {"key" : "hello", "value" : 1},        {"key" : "world", "value" : 2},    ];    $scope.current_option = $scope.option_array[0];  // 下拉框默认显示内容        console.log($scope.current_option.key);              // 获取下拉框显示内容     console.log($scope.current_option.value);         // 获取下拉框显示内容对应的值})二. select二级联动.HTML<div>  <select ng-model="current_option" ng-options="option.key for option in option_array" ng-change="current_option_change()"> </select></div><div>  <select ng-model="child_current_option" ng-options="option.key for option in child_option_array"> </select></div>JS$(function()   // 这是动作, 立即执行{    /**** 设置父下拉框显示内容 ****/    $scope.option_array = [        {"key" : "hello", "value" : 2},        {"key" : "world", "value" : 2},    ];    $scope.current_option = $scope.option_array[0];          // 父下拉框默认显示内容        /**** 初始加载时根据父下拉框内容显示子下拉框内容 ****/    $scope.child_change_with_father();})/**** 根据父下拉框当前显示内容设置子下拉框内容 ****/$scope.child_change_with_father = function ()                        // 这是方法, 调用执行{    if ("hello" == $scope.current_option.key)     {        $scope.child_option_array = [            {"key" : "hello_child_one", "value" : 1},            {"key" : "hello_child_two", "value" : 2},        ];    }    else if ("world" == $scope.current_option.key)    {        $scope.child_option_array = [            {"key" : "world_child_one", "value" : 3},            {"key" : "world_child_two", "value" : 4},        ];    }    $scope.child_current_option = $scope.child_option_array[0];  // 子下拉框默认显示内容}$scope.current_option_change = function() {    $scope.child_change_with_father();}

 

angularjs---select使用---默认值及联动