Блог

Я использую 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   'amp;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 после рекомендации изменить data-ng-model для использования переменных области видимости 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>
  

предполагая, что 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>