无法使用angularJs动态填充下拉列表

时间:2017-11-24 07:24:36

标签: javascript angularjs


  • 我有3个下拉列表,ABC
  • 根据下拉菜单选择,下拉列表B 将被填充。
  • 然后根据下拉B 选择,下拉列表将被填充。

    我能够实现前两个步骤。但我无法达到第三点。

    jsfiddle link

4 个答案:

答案 0 :(得分:1)

怎么样?
<div data-ng-app data-ng-controller="myCtrl">
  <select data-ng-model="option1" data-ng-options="option for option in options1 " data-ng-change="getOptions2($index)">
  </select>
  <select data-ng-model="option2" data-ng-options="option for option in options2" data-ng-show='options2.length' data-ng-change="getOptions3()">
  </select>
  <select data-ng-model="option3" data-ng-options="option for option in options3" data-ng-show='options3.length'>
  </select>
</div>


function myCtrl($scope) {
  $scope.options1 = option1Options;
  $scope.options2 = []; // we'll get these later
  $scope.options3 = [];
  $scope.getOptions2 = function() {
    $scope.options2 = option2Options[option1Options.indexOf($scope.option1)];
    $scope.getOptions3();
  };

  $scope.getOptions3 = function() {
 var mergedOptions2=[].concat.apply([], option2Options )
$scope.options3 = option3Options[mergedOptions2.indexOf($scope.option2)];
  }
}

Working fiddle

答案 1 :(得分:0)

您忘记调用getOption2()函数来获取option3

<select data-ng-model="option2" data-ng-options="option for option in options2" data-ng-show='options2.length' data-ng-change="getOptions2()">
</select>

的Fiddler http://jsfiddle.net/Xku9z/1198/

答案 2 :(得分:0)

你无法达到第三点,因为你在下拉列表A有一个值而不是B时尝试这样做。如果你在B上添加一个新的触发器,它具有与B相关的相同功能,它将起作用。

第1步:在下拉列表中添加更改触发器:

$scope.getOptions3 = function() {
    var key2 = $scope.options2.indexOf($scope.option2);
    var myNewNewOptions = option3Options[key2];
    $scope.options3 = myNewNewOptions;
};

步骤2:在控制器上添加一个功能,以更新下拉列表C的选项:

// DOM Ready 
$('input#PHONE_FIELD_ID').on('change', function () {      
    handlePhoneValidation();
    return false;
});

 var clickAttr = $("#SAVE_BUTTON_ID").attr("onclick"); 
 $("#SAVE_BUTTON_ID").attr("onclick","return handlePhoneValidation(); "+clickAttr);


function handlePhoneValidation(){

    clear_all_errors();

    var node = $('input#PHONE_FIELD_ID');
        current_val = node.val();

   /*
    * Your validation will go here
    * if condition fail then return false otherwise true 
   */

    return false;
}

我已相应地更新了你的小提琴:http://jsfiddle.net/Xku9z/1196/

答案 3 :(得分:0)

如果我是你,我会改变你的下拉来调用不同的功能。这样您就不必在需要之前设置第三组选项。 已验证它适用于JSFiddle。

而不是..

function myCtrl($scope) {
  $scope.options1 = option1Options;
  $scope.options2 = []; // we'll get these later
  $scope.options3 = [];
  $scope.getOptions2 = function() {

    var key = $scope.options1.indexOf($scope.option1);
    var key2 = $scope.options2.indexOf($scope.option2);
    var myNewOptions = option2Options[key];
    var myNewNewOptions = option3Options[key2];
    $scope.options2 = myNewOptions;
    $scope.options3 = myNewNewOptions;
  };
}

使用此...

function myCtrl($scope) {
  $scope.options1 = option1Options;
  $scope.options2 = []; // we'll get these later
  $scope.options3 = [];
  $scope.getOptions2 = function() {
    var key = $scope.options1.indexOf($scope.option1);
    var myNewOptions = option2Options[key];
    $scope.options2 = myNewOptions;
  };
    $scope.getOptions3 = function() {
    var key2 = $scope.options2.indexOf($scope.option2);
    var myNewNewOptions = option3Options[key2];
    $scope.options3 = myNewNewOptions;
  };
}

并确保您调用data-ng-change =&#34; getOptions3()&#34;在你的第二个选择标签上。