Установка значения выпадающего списка из выбранной записи

Question

Я использую AngularJS, и мне нужно установить выбранную опцию выпадающего списка, когда запись выбрана для редактирования и загружена в форму. В раскрывающемся списке все еще должны быть доступны другие значения, если пользователь хочет выбрать другой.

Если запись не выбрана, форма должна иметь список доступных значений, если пользователь хочет создать новую запись.

Внизу внизу находится снимок экрана моей формы, когда он впервые загружается. На снимке экрана вы можете увидеть, что раскрывающийся список «Инструменты» показывает все доступные инструменты. Этот список загружается через веб-службу, которая вызывается при загрузке формы.

Он помещает все содержимое в массив с именем: $ scope.instruments

Код:

//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; 
    }); 

Ниже форме, есть сетка со всеми записями:

Когда пользователь нажимает на иконку редактирования, звукозаписывающие нагрузки на форме:

Пластинка имеет значения для инструмента, стиля и задира, но я не знаю, как использовать эти значения из запись, чтобы установить выбранное значение при выпадающем списке.

Это код, который я использую, чтобы загрузить выбранную запись и присвоить идентификатор инструмента, идентификатор стиля, идентификатор подсчета очков. Не самый элегантный код, но это, насколько я был в состоянии получить:

 //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; 
     }); 
    } 

И это HTML для падения капли:

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

Пожалуйста, любая помощь я могу получить в этом форуме было бы здорово. Я весь день борюсь с этим, и я уверен, что это не должно быть слишком сложно.

Обновление

Это обновление HTML после рекомендации модифицированных данных-нг-модель для использования в объеме переменных recordInstrument, recordStyle и 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

если предположить, что JS код

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]); 
      } 
     }); 

получить правильные идентификаторы, и есть 3 функции getRecordInstrument, getRecordStyle и getRecordScoring которые принести инструмент, стиль или скоринг объектов по его идентификатору, попробуйте назначить эти идентификаторы для выбора с помощью ngModel директива:

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