更新後に複数の選択を表示するmd-select

Question

issue on the material githubを作成しましたが、material2に重点を置いて、私がやっていることか、それが問題かどうかを判断するために、 anglejs/material。だからここに私の問題です：

ユーザーがドロップダウンから選択し、「Add Newを」クリックして証明書を追加することができます。これらの証明書はng-repeatにバインドされ、黄色のカードが生成されます。これらのカードは、すべて同じデータ型にバインドされたリストを持っています。上記のように、このアイコンをクリックすると、ページにmd-selectが入るリストに項目を追加するためのフォームを表示するダイアログが開きます。リストに追加した後、md-selectの選択したラベルは、同じ項目のうちの2つが選択されていることを示します。 multipleはmd-selectでは有効ではなく、選択された各IDには1つの値しかありません。 md-side-nav、タブタイトル、またはmd-selectをクリックすると、選択したラベルが正しく表示されます。 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> 

、ここでは私のロジックです：

(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-selectであるmd-optionを印刷配列の参照は、モデルが更新されない変更とに異常がある場合あなたが質問で見ることができるようにmd-selectのプレビューそれはng-repeatがmd-optionのすべてを再表示し、この使用例を適切に処理しない角度のある素材にバグがあるためです。

ソリューションは、あなたがテンプレートのshowAddCertificationTypeDialog` `を持っているコードを追加することができますので、リスト全体を

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