无法填写下拉列表

时间:2017-07-22 18:45:06

标签: angularjs


我正在使用 Angular js 填充 3下拉列表 根据第一次下拉选择,第二次下拉将填充,并根据第二次下拉第三次下拉将填补。

HTML

<div ng-app ng-controller="myCtrl">
    <select ng-model="option1" ng-options="option for option in options1" ng-change="getOptions2()">
    </select>
    <select ng-model="option2" ng-options="option for option in options2" ng-change="getOptions3()">
    </select>
    <select ng-model="option3" ng-options="option for option in options3">
    </select>
</div>


控制器

var option1Options = ["Men", "Women", "Kids"];
var option2Options = [["Top wear","Bottom wear","Blazers"],
               ["W-Top Wear","W-Bottom Wear","W-Blazers"],
               ["K-Top wear","K-Bottom wear","K-others"]];
var option3Options = [["M-Tshirts","M-Casula Shirts","option2 - 3-3"],
               ["M-Jeans","option2 - 3-2","option2 - 3-3"],
               ["M-Blazers","option2 - 3-2","option2 - 3-3"],
               ["w-Tshirts","w-Casula Shirts","w-option2 - 3-3"]];

function myCtrl($scope){
    $scope.options1 = option1Options;
    $scope.options2 = []; 
    $scope.options3 = [];

    $scope.getOptions2 = function(){
        var key = $scope.options1.indexOf($scope.option1);
        var myNewOptions = option2Options[key];

        $scope.options2 = myNewOptions;
    };

    $scope.getOptions3 = function(){

        var key = $scope.options2.indexOf($scope.option2);
        var myNewOptions = option3Options[key];

        $scope.options3 = myNewOptions;
    };
} 

小提琴链接http://jsfiddle.net/mayankBisht/Xku9z/513/
问题

  • 当我尝试用女性选项填充第三个下拉列表时,它仍然显示男士选项。
    请帮忙。

0 个答案:

没有答案