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

Question

我正在尝试根据 angularJS 中第一个 select- 下拉菜单的选择填充第二个 select- 下拉菜单。我不知道为什么它不更新 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() 但它没有解决我的问题。

你能帮帮我吗？

谢谢。

Answer 1

我已经为你的问题创建了一个 fiddle 它工作正常试试你的代码，如果它不工作，请在 fiddle 中更新你的代码，我们可以一起调试

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

Answer 2

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

如果要更新select中的项目，只需在编辑原始select后重新运行上面的初始化代码。或者你可以用下面这个函数销毁 material select，并创建一个新的 select 共

$('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);

    }

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

AngularJS: Populate second select-dropdown based on choice of first select-dropdown

javascript

html

angularjs

select

ng-options