Question

我正在使用AngularJS，当选择要编辑的记录并加载到表单时，我需要设置下拉列表控件的选定选项。如果用户想要选择其他值，则下拉列表仍应具有其他可用值。

如果没有选择记录，如果用户想要创建新记录，表单仍应具有值列表。

下面是我的表单首次加载时的屏幕截图。您可以在屏幕截图中看到“仪器”下拉列表显示了所有可用的仪器。此列表通过在加载表单时调用的Web服务加载。

它将所有内容放入名为：$ 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;
  });

在表单下方，有一个包含所有记录的网格：

当用户点击编辑图标时，记录会加载到表单上：

记录包含乐器，样式和评分的值，但我不知道如何使用记录中的这些值，在下拉列表中设置所选值。

这是我用来加载所选记录并分配工具ID，样式ID，评分ID的代码。不是最优雅的代码，但这是我能够得到的：

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

请在这个论坛上得到的任何帮助都会很棒。我整天都在苦苦挣扎，我相信它不应该太复杂。

更新

这是在修改数据-ng-model以使用范围变量recordInstrument，recordStyle和recordScoring之后的更新HTML。

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

获取正确的ID，并且有3个函数 getRecordInstrument ， getRecordStyle 和 getRecordScoring ，它们可以获取 instrument ，< em> style 或通过其ID评分对象，尝试通过 ngModel 指令分配这些ID：

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

从所选记录中设置下拉列表的值

1 个答案: