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调用值更改时，更改函数“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）：

如果要更新选择内的项目，只需在编辑原始选择后重新运行上面的初始化代码。或者您可以使用下面的此功能销毁材料选择，并完全创建一个新的选择

$（＆＃39;选择＆＃39）。material_select（＆＃39;破坏＆＃39）;

我的更新代码是：

$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：根据第一个选择下拉列表的选择填充第二个选择下拉列表

2 个答案: