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

Question

I am trying to populate second select-dropdown based on choice of first select-dropdown in angularJS. I don't know why it doesn't update the DOM (UI):

Dropdown 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>

Dropdown 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>

In the dropdown 1 when the value changes i invoke with ng-change the function "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);
            }
        })
    }
}

The list listTipoProdottoListinoFiltered is populated with values but nothing happens in the front-end. I used also $scope.$apply() but it doesn't fix my problem.

Can you help me?

Thank you.

Answer 1

我已经为您的问题创建了一个小提琴，如果无法正常工作，请尝试在您的代码中进行尝试，如果您的代码无法正常更新，我们可以一起调试

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

Answer 2

I solved the issue. The problem was Angular Materialize ( http://materializecss.com/forms.html#select-initialization ):

If you want to update the items inside the select, just rerun the initialization code from above after editing the original select. Or you can destroy the material select with this function below, and create a new select altogether

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

My updated code is this :

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

    }