Question

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

用户可以通过从下拉列表中选择并单击＆＃34;添加新＆＃34;来添加认证。这些认证绑定到ng-repeat，生成黄色卡片。这些卡的列表都绑定到相同的数据类型。如您所见，我点击此图标打开一个对话框，该对话框显示一个表单，用于将项目添加到列表中，该列表填充页面上的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事件。能够在我的codepen上重现这一点对于缩小我怀疑与事件发生时间相关的问题非常有帮助。任何帮助将不胜感激！

更新故障排除：我尝试在我的$timeout方法中添加getCertificationTypes调用但没有结果，因此我将调用加倍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-select，当打印md-option的数组的引用更改时模型未更新且预览中存在异常您可以在问题中看到md-select。这是因为ng-repeat重新呈现了所有md-option并且角度材料中存在错误，无法正确处理此用例。

解决方法是在track by中添加ng-repeat属性，以便不重新呈现整个列表

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

md-select更新

1 个答案: