【问题标题】:How to set the default selected option in a dropdown being created by data-ng-options如何在 data-ng-options 创建的下拉列表中设置默认选定选项
【发布时间】:2019-05-09 14:08:37
【问题描述】:

我有一个正在设置的选择下拉菜单和通过“data-ng-options”创建的选项

这是 HTML:

<select class="form-control" id="playListOpt" ng-model="playListItem.selectedObject" ng-change="changePlaylist(playListItem.selectedObject)" ng-required="true"
              data-ng-options="playListItem as playListItem.name for playListItem in playListDataForActivity">
        <option value="" translate="PLAYLIST_CREATE_NEW"></option>
      </select>

这会在编译后的 html 中产生以下输出:

<select class="form-control ng-pristine ng-valid ng-valid-required ng-touched" id="playListOpt" ng-model="playListItem.selectedObject" ng-change="changePlaylist(playListItem.selectedObject)" ng-required="true" data-ng-options="playListItem as playListItem.name for playListItem in playListDataForActivity" required="required" aria-required="false" aria-invalid="false" style=""><option value="" translate="PLAYLIST_CREATE_NEW" class="" selected="selected">Create New Playlist</option><option label="Dev Playlist 1" value="object:2670">Dev Playlist 1</option><option label="Dev Playlist 2 (Favorite)" value="object:2671">Dev Playlist 2 (Favorite)</option></select>

目前“创建新播放列表”选项始终是选中的选项。但是,我想将所选选项设置为设置为“isDefault”的选项,该选项可通过 playListItem 提供给我。我觉得我的问题是不了解如何设置 selectedObject,因为选项的值似乎是由代码生成的?

这是控制器中的代码,如果项目设置为“isDefault”,我正在设置 selectedObject。这不起作用。

if (response && response.status == 200) {
              $scope.playListDataForActivity = response.data.playlists;
              $scope.totalOwnedPlaylistCount = response.data.totalOwnedPlaylistCount;

              for (var i = 0; $scope.playListDataForActivity[i]; i++) {
                if ($scope.playListDataForActivity[i].isDefault)
                  $scope.playListItem.selectedObject = $scope.playListDataForActivity[i];
                }
          }

关于我需要做什么来解决这个问题的任何提示?

更新了上面的代码和下面的新问题

在@Lex 下面建议的更改之后,“创建新播放列表”和 IsDefault 选项都在 HTML 中被标记为选中

<select class="form-control ng-pristine ng-valid ng-valid-required ng-touched" id="playListOpt" ng-model="playListItem.selectedObject" ng-change="changePlaylist(playListItem.selectedObject)" ng-required="true" data-ng-options="playListItem as playListItem.name for playListItem in playListDataForActivity" required="required" aria-required="false" aria-invalid="false" style=""><option value="" translate="PLAYLIST_CREATE_NEW" class="" *selected="selected"*>Create New Playlist</option><option label="Dev Playlist 1" value="object:2996">Dev Playlist 1</option><option label="Dev Playlist 2 (Favorite)" value="object:2995" *selected="selected"*>Dev Playlist 2 (Favorite)</option><option label="Dev Playlist 3" value="object:2997">Dev Playlist 3</option></select>

有什么我需要清除的,或者“选择”中有什么需要添加的吗?

【问题讨论】:

  • 你不想$scope.playListItem.selectedObject = $scope.playListDataForActivity[i]吗?您需要分配对象,而不是其.id
  • for (var i = 0; $scope.playListDataForActivity[i]; i++) { 应该是for (var i = 0; i &lt; $scope.playListDataForActivity.length; i++) {
  • @Lex 这就是问题所在...谢谢!
  • 之后更改“创建新播放列表”选项和 IsDefault 选项都在 HTML 中被标记为选中...知道为什么会这样吗?更新了上面的代码/问题。
  • 您是否有其他代码选择了默认选项?因为那绝对不应该发生。

标签: angularjs angularjs-ng-options


【解决方案1】:

对于更新的代码和新问题,如果您将特定值设置为默认选择值,则无需使用&lt;option value="" translate="PLAYLIST_CREATE_NEW"&gt;&lt;/option&gt;,因为正在使用 data-ng-options。通过删除选项,它将得到解决。 希望这会有所帮助!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-08-05
    • 1970-01-01
    • 1970-01-01
    • 2019-05-05
    • 2014-10-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多