javascript - md-select 在更新后显示多个选择

Question

我创建了一个 issue on the material github ，但由于他们专注于 material2，我想从这里的专家那里得到一些帮助，以确定这是我正在做的事情，还是 angularjs/material 的问题。所以这是我的问题:

用户可以通过从下拉列表中选择并单击“添加新的”来添加认证。这些认证绑定(bind)到生成黄色卡片的 ng-repeat。这些卡片的列表都绑定(bind)到相同的数据类型。正如您在上面看到的，我单击此图标打开一个对话框，其中显示用于将项目添加到列表的表单，该列表填充页面上的 md-select。添加到列表后，md-select 的选定标签显示两个相同的项目被选中。 multiple 未在 md-select 上启用，每个选定的 id 只有一个值。单击 md-side-nav、选项卡标题或 md-select 本身将更新所选标签以正确显示。检查 DOM，没有重复项。我有 attempted to recreate this issue on codepen但到目前为止我一直没有成功。这是我的布局:

<md-tabs md-dynamic-height md-border-bottom>
    <md-tab>
        <md-tab-label>
            Certifications
        </md-tab-label>
        <md-tab-body>
            <div layout="row" layout-padding>
                <div flex="50">
                    <md-input-container>
                        <label>Last Audit</label>
                        <md-datepicker ng-model="addEditSupplierCtrl.supplier.dateLastAudit"></md-datepicker>
                    </md-input-container>
                </div>
                <div>
                    <md-input-container>
                        <label>Next Audit</label>
                        <md-datepicker ng-model="addEditSupplierCtrl.supplier.dateNextAudit"></md-datepicker>
                    </md-input-container>
                </div>
            </div>
            <div layout="row" layout-padding>
                <md-input-container style="min-width: 200px;">
                    <label>Certification Type</label>
                    <md-select ng-model="addEditSupplierCtrl.newSupplierCertification.certificationTypeId">
                        <md-option ng-repeat="certificationType in addEditSupplierCtrl.certificationTypes" value="{{ certificationType.id }}">
                            {{ certificationType.name }}
                        </md-option>
                    </md-select>
                </md-input-container>
                <div>
                    <md-button class="md-primary md-raised" ng-click="addEditSupplierCtrl.addSupplierCertification($event)">Add New</md-button>
                </div>
            </div>
            <div layout="row" layout-wrap>
                <md-card md-theme="{{ certification.requiresAudit ? 'audit' : 'default' }}" ng-repeat="certification in addEditSupplierCtrl.supplier.supplierCertifications | orderBy:'certificationType.name'" flex="100" flex-gt-sm="40" flex-gt-md="30">
                    <md-card-title flex="none">
                        <md-card-title-text>
                            <div style="position: relative">
                                <strong>Selected Id:</strong> {{ certification.certificationTypeId | json }}<br />
                                <md-input-container style="min-width: 150px; max-width: 350px;">
                                    <label>Certification Type</label>
                                    <md-select ng-model="certification.certificationTypeId">
                                        <md-option ng-repeat="certificationType in addEditSupplierCtrl.certificationTypes" value="{{ certificationType.id }}">
                                            {{ certificationType.name }}
                                        </md-option>
                                    </md-select>
                                </md-input-container>
                                <br /><strong>Select List Data:</strong> {{ addEditSupplierCtrl.certificationTypes | json }}
                                <md-button class="md-icon-button md-primary" ng-click="addEditSupplierCtrl.showAddCertificationTypeDialog($event)">
                                    <md-icon>playlist_add</md-icon>
                                </md-button>
                                <div style="position: absolute; right: 0; top: 0">
                                    <md-button class="md-icon-button md-primary" title="Delete Certification" ng-click="addEditSupplierCtrl.deleteCertification($event, certification)">
                                        <md-icon>cancel</md-icon>
                                    </md-button>
                                </div>
                            </div>
                        </md-card-title-text>
                    </md-card-title>
                    <md-card-content>
                        <div class="md-media-sm card-media" flex>
                            <md-checkbox class="md-primary" ng-model="certification.requiresAudit">
                                Requires Audit
                            </md-checkbox>
                            <md-input-container class="md-block">
                                <label>Number</label>
                                <input ng-model="certification.number" />
                            </md-input-container>
                            <md-input-container>
                                <label>Expiration</label>
                                <md-datepicker ng-model="certification.expirationDate"></md-datepicker>
                            </md-input-container>
                            <md-input-container class="md-block">
                                <label>Notes</label>
                                <textarea ng-model="certification.notes"></textarea>
                            </md-input-container>
                        </div>
                    </md-card-content>
                </md-card>
            </div>
        </md-tab-body>
    </md-tab>
</md-tabs>

这是我的逻辑:

(function () {
angular.module('ASLApp').controller('AddEditSupplierController', AddEditSupplierController);

function AddEditSupplierController(addMode, $scope, $routeParams, $mdDialog, RandomService, SupplierService, CertificationTypeService) {
    var vm = this;

    vm.save = function (evt) {
        vm.loading = true;
        SupplierService.update(vm.supplier).then(function (response) {
            vm.supplier = response.data;
            parseDates();
        }, function (response) {
            if (response.data && response.data.Errors && response.data.Errors.length > 0 && response.data.Errors[0].number === 2627) {
                $mdDialog.show(
                  $mdDialog.alert()
                    .clickOutsideToClose(true)
                    .title('Duplicate Supplier Id Entry Found')
                    .textContent('Another supplier entry was found with the same Id.')
                    .ok('Ok')
                );
            }
        }).finally(function () {
            vm.loading = false;
        });
    };

    vm.addSupplierCertification = function (evt) {
        if (!vm.supplier.supplierCertifications) {
            vm.supplier.supplierCertifications = [];
        }
        vm.supplier.supplierCertifications.push(vm.newSupplierCertification);
        vm.newSupplierCertification = {
            certificationTypeId: vm.certificationTypes[0].id,
            tempId: RandomService.guid()
        };
    };

    vm.generateId = function (evt) {
        SupplierService.generateId(vm.supplier.name).then(function (response) {
            vm.supplier.id = response.data;
        });
    };

    vm.showAddCertificationTypeDialog = function (evt) {
        $mdDialog.show({
            scope: $scope,
            preserveScope: true,
            templateUrl: 'app/views/AddCertificationTypeDialog.html',
            parent: angular.element(document.body),
            targetEvent: evt
        });
    };

    vm.cancelDialog = function (evt) {
        $mdDialog.cancel();
    };

    vm.addCertificationType = function () {
        CertificationTypeService.add(vm.newCertificationType).then(function (response) {
            vm.newCertificationType = {};
            getCertificationTypes();
            $mdDialog.hide();
        });
    };

    function init() {
        vm.addMode = addMode;
        if (!addMode) {
            getSupplier($routeParams.id);
        }
        getCertificationTypes();
    }

    function getSupplier(id) {
        vm.loading = true;
        SupplierService.get(id).then(function (response) {
            vm.supplier = response.data;
            parseDates();
        }).finally(function () {
            vm.loading = false;
        });
    }

    function getCertificationTypes() {
        CertificationTypeService.getAll().then(function (response) {
            if (vm.certificationTypes)
                delete vm.certificationTypes;

            vm.certificationTypes = response.data;

            vm.newSupplierCertification = {
                certificationTypeId: vm.certificationTypes[0].id,
                tempId: RandomService.guid()
            };
        });
    }

    function parseDates() {
        if (vm.supplier.dateLastReview) {
            vm.supplier.dateLastReview = new Date(vm.supplier.dateLastReview);
        }

        if (vm.supplier.dateNextReview) {
            vm.supplier.dateNextReview = new Date(vm.supplier.dateNextReview);
        }

        if (vm.supplier.dateLastAudit) {
            vm.supplier.dateLastAudit = new Date(vm.supplier.dateLastAudit);
        }

        if (vm.supplier.dateNextAudit) {
            vm.supplier.dateNextAudit = new Date(vm.supplier.dateNextAudit);
        }

        if (vm.supplier.supplierCertifications) {
            angular.forEach(vm.supplier.supplierCertifications, function (certification) {
                if (certification.expirationDate) {
                    certification.expirationDate = new Date(certification.expirationDate);
                }
            });
        }
    }

    init();
}

AddEditSupplierController.$inject = ['addMode', '$scope', '$routeParams', '$mdDialog', 'RandomService', 'SupplierService', 'CertificationTypeService'];
}());

在故障排除期间，我删除了其他选项卡并在列表中添加了一个新项目后，它显示了半秒钟的多项选择，但随后更新为正确显示。这让我想知道是否发生了某种debounce。能够在我的代码笔上重现这一点对于缩小我怀疑与事件时间相关的问题的范围非常有帮助。如有任何帮助，我们将不胜感激!

故障排除更新:我尝试向我的 getCertificationTypes 方法添加一个 $timeout 调用但没有结果，因此我将对 getCertificationTypes 的调用加倍。它向所选值标签添加了另一个副本。

    vm.addCertificationType = function () {
        CertificationTypeService.add(vm.newCertificationType).then(function (response) {
            vm.newCertificationType = {};
            $timeout(getCertificationTypes, 1000);
            $timeout(getCertificationTypes, 1000);
            //getCertificationTypes();
            $mdDialog.hide();
        });
    };

Answer 1

在评论和聊天中讨论后，当打印 md-option 的数组引用更改模型时，问题出在 md-select未更新并且 md-select 的预览存在异常，如您在问题中所见。这是因为 ng-repeat 重新呈现所有 md-option 并且 Angular Material 中存在无法正确处理此用例的错误。

解决方案是在 ng-repeat 中添加 track by 属性，这样整个列表就不会重新呈现

<md-select ng-model="certification.certificationTypeId">
    <md-option ng-repeat="certificationType in addEditSupplierCtrl.certificationTypes track by certificationType.id" value="{{ certificationType.id }}">
           {{ certificationType.name }}
     </md-option>
</md-select>