Question

我有一个模态作为指令。问题是，当我试图用已经填充的数据打开模态时，选择的标签不会更新，直到我第二次打开模态。

我使用了角度和materializecss。请注意，所有其他字段都可以工作，但选择不会直到我第二次打开模态但在日志中始终显示更新范围的数据，因此问题是选择不是按时渲染或类似的事情。< / p>

JS打开带有填充数据的模态

$scope.update = function (customer) {
    console.log("selected type id: "+$scope.selectedIdType)

    $scope.isUpdating = true;
    updateView()
    $scope.newCustomer = customer;
    var resultSplitTin = customer.tin.split('-');
    $scope.inputId = resultSplitTin[1] + (resultSplitTin.length > 2 ? '-' + resultSplitTin[2] : '');
    $scope.selectedIdType = resultSplitTin[0];
    console.log($scope.inputId)
    $scope.inputPhone = customer.phones[0];
    $scope.newCustomer.zone = customer.zone;
    console.log("selected type id after: "+$scope.selectedIdType)

    for (var i = 0; i < $scope.zones.length; i++) {
       // console.log(customer.zone + " == " + $scope.zones[i].code);
        if (customer.zone == $scope.zones[i].code) {
            $scope.newCustomer.zone = $scope.zones[i];
        }
    }


    $('#modalCustomer').openModal();
    $('#selectedTaxInput').material_select();
    $('#selectedZoneInput').material_select();
    $('#selectedIdInput').material_select();


};

模态HTML（所有输入都更新但没有选择）

<form class="col s12" >
            <div class="row">
                <div class="input-field col s4">
                    <select id="selectedIdInput" ng-options="id for id in idTypes" ng-model="selectedIdType">
                        <option value="" disabled selected>Elije una opci&oacute;n</option>
                    </select>
                    <label>Tipo</label>
                </div>
                <div class="input-field col s8">
                    <input id="identification" type="text" class="validate" ng-class="{'valid': inputId.length > 0}"
                           ng-model="inputId">
                    <label for="identification"
                           ng-class="{'active': inputId.length > 0}">Identificaci&oacute;n</label>
                </div>
            </div>
            <div class="input-field col s12">
                <input id="name" type="text" class="validate" ng-class="{'valid': newCustomer.name.length > 0}"
                       ng-model="newCustomer.name">
                <label for="name" ng-class="{'active': newCustomer.name.length > 0}">Nombre</label>
            </div>
            <div class="input-field col s12">
                <input id="telephone" type="text" class="validate" ng-class="{'valid': inputPhone.length > 0}"
                       ng-model="inputPhone">
                <label for="telephone" ng-class="{'active': inputPhone.length > 0}">Tel&eacute;fono</label>
            </div>
            <div class="input-field col s12" >
                <textarea id="address" class="materialize-textarea"
                          ng-class="{'valid': newCustomer.address.length > 0}"
                          ng-model="newCustomer.address"></textarea>
                <label for="address" ng-class="{'active': newCustomer.address.length > 0}">Direcci&oacute;n</label>
            </div>

            <label style="margin-left:10px">Localidad</label>

            <div id="selectedZone" class="input-field col s12 l12" input-field>
                <select id="selectedZoneInput" ng-model="newCustomer.zone"
                        ng-options="item.code as item.name for item in zones track by item.code"
                        ng-change="showSelected()" watch>
                    <option value="" disabled selected>Elije una opci&oacute;n</option>
                </select>
            </div>
        </form>

FIX

$scope.update = function (customer) {
    console.log("selected type id: "+$scope.selectedIdType)

    $scope.isUpdating = true;
    updateView()
    $scope.newCustomer = customer;
    var resultSplitTin = customer.tin.split('-');
    $scope.inputId = resultSplitTin[1] + (resultSplitTin.length > 2 ? '-' + resultSplitTin[2] : '');
    $scope.selectedIdType = resultSplitTin[0];
    console.log($scope.inputId)
    $scope.inputPhone = customer.phones[0];
    $scope.newCustomer.zone = customer.zone;
    console.log("selected type id after: "+$scope.selectedIdType)

    for (var i = 0; i < $scope.zones.length; i++) {
       // console.log(customer.zone + " == " + $scope.zones[i].code);
        if (customer.zone == $scope.zones[i].code) {
            $scope.newCustomer.zone = $scope.zones[i];
        }
    }


    $('#modalCustomer').openModal({
        ready: function(){
            $timeout(function() {
                $('#selectedTaxInput').material_select();
                $('#selectedZoneInput').material_select();
                $('#selectedIdInput').material_select();
            });
        }
    });

};

Answer 1

这是因为您使用jQuery打开模态并绑定值，因此Angular不知道更改。有一个概念digest cycle，因为当模型值发生变化时，Angular会更新视图，反之亦然。

但是在这里，您使用jQuery来修改Angular上下文中的数据，因此您需要手动告诉Angular某些内容已发生变化。您可以通过调用$scope.$apply()来使用它，但它有一些限制，即如果摘要周期已在进行中，它可能会失败并抛出异常。

因此，您可以使用$timeout服务。

$('#modalCustomer').openModal();

// Assuming this selector is the modal's selector
$('#modalCustomer').on('shown.bs.modal', function (e) {
    $timeout(function() {
        $('#selectedTaxInput').material_select();
        $('#selectedZoneInput').material_select();
        $('#selectedIdInput').material_select();
    });
});

打开模态时为什么选择标签不更新？

1 个答案: