Den Wert einer Dropdownliste aus einem ausgewählten Datensatz festlegen

Question

Ich verwende AngularJS und muss eine ausgewählte Option eines Dropdown-Listensteuerelements festlegen, wenn ein Datensatz zum Bearbeiten ausgewählt und in ein Formular geladen wird. Das Dropdown sollte die anderen Werte immer noch verfügbar haben, wenn der Benutzer einen anderen auswählen möchte.

Wenn kein Datensatz ausgewählt ist, sollte das Formular immer noch die Liste der verfügbaren Werte enthalten, wenn der Benutzer einen neuen Datensatz erstellen möchte.

Unten ist der Screenshot meines Formulars beim ersten Laden. Sie können im Screenshot sehen, dass die Dropdown-Liste Instrumente alle verfügbaren Instrumente anzeigt. Diese Liste wird über einen Webdienst geladen, der beim Laden des Formulars aufgerufen wird.

Es stellt alle Inhalte in ein Array mit dem Namen: scope.instruments $

Code:

//Get Instruments 
    $http.get('/api/Instrument/GetAllInstruments').success(function (data, status, headers, config) { 
     $scope.instruments = data; 
    }).error(function (data, status, headers, config) { 
     $scope.error = "An error has occurred while fetching Instruments." + data; 
    }); 

Unterhalb der Form, ein Gitter mit allen Datensätzen gibt es:

Wenn ein Benutzer klickt auf das Symbol Bearbeiten, die Plattenlasten auf dem Formular:

Der Datensatz hat Werte für das Instrument, Stil und Scoring, aber ich weiß nicht, wie diese Werte von der verwenden record, um den ausgewählten Wert im Drop-down-Menü festzulegen.

Dies ist der Code, den ich verwende, um den ausgewählten Datensatz zu laden und Geräte-ID, Style-ID, Scoring-ID zuzuweisen. Ist das nicht der eleganteste Code, aber das ist so weit wie ich in der Lage gewesen zu bekommen:

 //Edit Store Page 
    $scope.edit = function() { 

     if (this.page.SPPreambleID === null || this.page.SPPreambleID === 0) 
     { 
      this.page.SPPreambleID = -1; 
     } 

     $http.get('/api/StorePage/GetStorePage?StorePageID=' + this.page.StorePageID + '&SPPreambleID=' + this.page.SPPreambleID).success(function (data) { 

      $scope.updateShow = true; 
      $scope.addShow = false;    

      $scope.newpage = data; 

      angular.forEach($scope.newpage.SPAttributeRefID, function (attribute, index) { 

       if (attribute == 1) { 
        $scope.recordInstrument = $scope.newpage.AttributeID[0];      
       } 

       if (attribute == 2) { 
        $scope.recordStyle = $scope.newpage.AttributeID[1]; 
       } 

       if (attribute == 3) { 
        $scope.recordScoring = $scope.newpage.AttributeID[2]; 
       } 
      }); 


     }).error(function() { 
      $scope.error = "An Error has occured while Editing this Store Page!" + data; 
     }); 
    } 

Und dies ist der HTML-Code für den Drop-downs:

   @* Instrument *@ 
       <div class="form-group"> 
        <div class="col-sm-10 space"> 
         <select class="form-control" name="instrumentfilter" data-ng-model="instrumentfilter" required 
          data-ng-options="i.ID as i.Description for i in instruments track by i.ID" data-ng-change=""> 
          <option value="">-- Choose a Style --</option> 
         </select> 
        </div> 
       </div> 


       @* Style *@ 
       <div class="form-group"> 
        <div class="col-sm-10 space"> 
         <select class="form-control" name="stylefilter" data-ng-model="stylefilter" required 
          data-ng-options="st.ID as st.Description for st in styles track by st.ID" data-ng-change=""> 
          <option value="">-- Choose a Style --</option> 
         </select> 
        </div> 
       </div> 

       @* Scoring *@ 
       <div class="form-group"> 
        <div class="col-sm-10 space"> 
         <select class="form-control" name="scoringfilter" data-ng-model="scoringfilter" required 
          data-ng-options="sc.ID as sc.Description for sc in scorings track by sc.ID"> 
          <option value="">-- Choose a Scoring --</option> 
         </select> 
        </div> 
       </div> 

Bitte jede Hilfe, die ich bekommen kann in diesem Forum wäre super. Ich habe den ganzen Tag damit zu kämpfen gehabt, und ich bin mir sicher, dass es nicht zu kompliziert sein sollte.

aktualisieren

Dies ist die aktualisierte HTML nach Empfehlung an modifizierten Daten-ng-Modell die Bereichsvariablen recordInstrument, recordStyle zu verwenden, und recordScoring.

   @* Instrument *@ 
       <div class="form-group"> 
        <div class="col-sm-10 space"> 
         <select class="form-control" name="instrumentfilter" data-ng-model="recordInstrument" required 
          data-ng-options="i.ID as i.Description for i in instruments track by i.ID" data-ng-change=""> 
          <option value="">-- Choose a Style --</option> 
         </select> 
        </div> 
       </div> 


       @* Style *@ 
       <div class="form-group"> 
        <div class="col-sm-10 space"> 
         <select class="form-control" name="stylefilter" data-ng-model="recordStyle" required 
          data-ng-options="st.ID as st.Description for st in styles track by st.ID" data-ng-change=""> 
          <option value="">-- Choose a Style --</option> 
         </select> 
        </div> 
       </div> 

Answer 1

sei angenommen, daß JS Code

angular.forEach($scope.newpage.SPAttributeRefID, function (attribute, index) { 

      if (attribute == 1) { 
       $scope.recordInstrument = getRecordInstrument($scope.newpage.AttributeID[0]);      
      } 

      if (attribute == 2) { 
       $scope.recordStyle = getRecordStyle($scope.newpage.AttributeID[1]); 
      } 

      if (attribute == 3) { 
       $scope.recordScoring = getRecordScoring($scope.newpage.AttributeID[2]); 
      } 
     }); 

richtigen IDs erhalten, und es gibt 3 Funktionen getRecordInstrument, getRecordStyle und getRecordScoring dieInstrument holen, Stil oder scoring Objekte anhand ihrer ID versuchen, diese IDs zuzuweisen s über ngModel Richtlinie:

  @* Style *@ 
      <div class="form-group"> 
       <div class="col-sm-10 space"> 
        <select class="form-control" name="instrumentfilter" data-ng-model="recordInstrument" required 
         data-ng-options="i.ID as i.Description for i in instruments track by i.ID"> 
         <option value="">-- Choose a Style --</option> 
        </select> 
       </div> 
      </div> 


      @* Style *@ 
      <div class="form-group"> 
       <div class="col-sm-10 space"> 
        <select class="form-control" name="stylefilter" data-ng-model="recordStyle" required 
         data-ng-options="st.ID as st.Description for st in styles track by st.ID"> 
         <option value="">-- Choose a Style --</option> 
        </select> 
       </div> 
      </div> 

      @* Scoring *@ 
      <div class="form-group"> 
       <div class="col-sm-10 space"> 
        <select class="form-control" name="scoringfilter" data-ng-model="recordScoring" required 
         data-ng-options="sc.ID as sc.Description for sc in scorings track by sc.ID"> 
         <option value="">-- Choose a Scoring --</option> 
        </select> 
       </div> 
      </div>