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

我创建了一个，但由于他们关注material2，我想从这里的大师那里得到一些帮助，以确定这是我正在做的事情还是angularjs/material的问题。这就是我的问题：

用户可以通过从下拉列表中选择并单击“添加新证书”来添加证书。这些证书绑定到生成黄色卡片的

ng repeat

。这些卡的列表都绑定到同一数据类型。如上所示，我单击此图标打开一个对话框，其中显示了一个表单，用于将项目添加到填充页面上

md select

s的列表中。添加到列表后，

md select

的selected标签显示选择了两个相同的项目<在

md select

s上未启用code>multiple，并且每个选定的id只有一个值。单击

md侧导航

、选项卡标题或

md选择

本身将更新所选标签以正确显示。检查DOM时，没有重复项。我有过，但到目前为止我一直不成功。这是我的布局：

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

在我的故障排除过程中，我删除了其他选项卡，并在列表中添加了一个新项目后，它在半秒钟内显示了多个选择，但随后它更新为正确显示。这让我想知道是否有某种

debounce

发生。能够在我的代码笔上重现这一点将非常有助于缩小我怀疑与事件时间有关的问题。任何帮助都将不胜感激

故障排除更新： 我尝试将

$timeout

调用添加到我的

getCertificationTypes

方法中，但没有结果，因此我加倍调用了

getCertificationTypes

。它向选定的值标签添加了另一个副本

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

---

在评论和聊天中进行讨论后，当打印

md选项的数组的引用更改时，
md select
出现问题，模型未更新，并且正如您在问题中看到的那样，
md select
的预览中出现异常。这是因为
ng repeat
重新启动了所有
md选项
，并且在角度材质中存在错误，无法正确处理此用例

解决方案是在
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>


{{certificationType.name}}
能否为模板添加
showAddCertificationTypeDialog
中的代码？我想问题就在这里我更新了你的密码笔。查看$mdDialog以添加
certificationType
，并尝试像代码笔中实现的那样实现它。我想这会解决你的问题。为了理解您的想法和所做的更改，您建议我在
$mdDialog
中创建一个匿名控制器，并将返回值传递回原始控制器？是的。我想你有参考问题。如果您将$scope从模式中分离出来，我认为您的问题将得到解决。对不起，伙计。没有变化。
<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>