AngularJS：根据第一个选择下拉列表的选择填充第二个选择下拉列表答案

【问题标题】：AngularJS: Populate second select-dropdown based on choice of first select-dropdownAngularJS：根据第一个选择下拉列表的选择填充第二个选择下拉列表
【发布时间】：2017-12-17 03:32:11
【问题描述】：

我正在尝试根据 angularJS 中第一个选择下拉列表的选择来填充第二个选择下拉列表。我不知道为什么它不更新 DOM（UI）：

下拉菜单 1

<div class="input-field col s12 m4 l4 xl4">
        <select ng-model="selectedMacroProdotti.fdlcatprod.l01CatPrd" name="l02CatPrd" class="validate" required 
            ng-options="item.l01CatPrd as (item.l01CatPrd | uppercase) for item in listCategoriaProdotti"
            ng-change="populateTipoProdottoListino()">
            <!--  -->
        </select> <label>Codice Categoria Prodotto*</label>
        <div role="alert">
                <span class="error" ng-show="ModificaMacroProdotto.l02CatPrd.$error.required"><font color="red">Campo Obbligatorio!</font></span>           
        </div>
    </div>

下拉菜单 2

<div class="input-field col s12 m4 l4 xl4">
    <select ng-model="selectedMacroProdotti.fdltprdlis.l39TipPrdLst" name="l02TipPrdLst" class="validate"
            ng-options="item.l39TipPrdLst as (item.l39TipPrdLst | uppercase) for item in listTipoProdottoListinoFiltered">
            </select> <label>Tipo Prodotto Listino</label>
    </div>

在下拉列表 1 中，当值更改时，我使用 ng-change 调用函数“populateTipoProdottoListino()”：

var ctrlMacroProdotti = function(macroProdottiService, $scope, $window, macroProdottiFactory, $uibModal, dateFormatService, listCategoriaProdotti, listTipoProdottoListino, listTipoFrontEndV){`$scope.populateTipoProdottoListino = function(){
        $scope.listTipoProdottoListino = listTipoProdottoListino;
        $scope.listTipoProdottoListinoFiltered = [];
        var currentCatProd = $scope.selectedMacroProdotti.fdlcatprod.l01CatPrd;

        $scope.listTipoProdottoListino.forEach(function(item,index){
            if(item.l39CatPrd === currentCatProd){
                $scope.listTipoProdottoListinoFiltered.push(item);
            }
        })
    }
}

列表 listTipoProdottoListinoFiltered 填充了值，但前端没有任何反应。我也使用了 $scope.$apply() 但它不能解决我的问题。

你能帮帮我吗？

谢谢。

【问题讨论】：

标签： javascript html angularjs select ng-options

【解决方案1】：

我为您的问题创建了一个小提琴，它工作正常如果它不起作用，请尝试在您的代码中更新您的代码，我们可以一起调试

[http://jsfiddle.net/swatrahul/Xku9z/504/][1]

【讨论】：

【解决方案2】：

我解决了这个问题。问题是 Angular Materialize (http://materializecss.com/forms.html#select-initialization)：

如果你想更新选择中的项目，只需在编辑原始选择后重新运行上面的初始化代码。或者你可以用下面这个函数破坏材质选择，然后完全创建一个新的选择

$('select').material_select('destroy');

我的更新代码是这样的：

$scope.populateTipoProdottoListino = function(){
        $scope.listTipoProdottoListinoFiltered = [];
        var currentCatProd = $scope.selectedMacroProdotti.fdlcatprod.l01CatPrd;
        $scope.listTipoProdottoListino.forEach(function(item,index){
            if(item.l39CatPrd === currentCatProd){
                $scope.listTipoProdottoListinoFiltered.push(item);
            }
        });
        setTimeout(() => {
            $('#l02TipPrdLst').material_select('destroy');
            $('#l02TipPrdLst').material_select();
            $scope.$apply();
        }, 10);

    }

【讨论】：