AngularJS：根據對第一個選擇下拉列表的選擇來填充第二個選擇下拉列表

Question

我正在嘗試根據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（），但是它不能解決我的問題。

你能幫助我嗎？

謝謝。

Answer 1

我已經為您的問題創建了一個小提琴，如果無法正常工作，請嘗試在您的代碼中進行嘗試，如果您的代碼無法正常更新，我們可以一起調試

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

Answer 2

我解決了這個問題。 問題是Angular Materialize（ http://materializecss.com/forms.html#select-initialization ）：

如果要更新選擇內的項目，只需在編輯原始選擇后從上方重新運行初始化代碼即可。 或者您可以使用下面的此功能銷毀材料選擇，然后創建一個新的選擇

$（ '選擇'）material_select（ '摧毀'）。

我更新的代碼是這樣的：

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

    }