在AngularJS中预先选择一个“未知”选项答案

【问题标题】：Pre select an "unknown" option in AngularJS在AngularJS中预先选择一个“未知”选项
【发布时间】：2015-04-09 18:06:37
【问题描述】：

我正在尝试在选择下拉列表中预先选择一个选项，如果选项的值是静态的，我知道该怎么做。但是如果它们动态变化呢？就我而言，我得到了一个更新很多的专辑列表，所以我永远不知道这些选项的价值是什么。我尝试使用ng-init 选择列表中的第一张专辑，如下所示：

<select class="rounded bold" ng-model="selectedAlbum" ng-init="selectedAlbum='album[0].albumName'">
    <option ng-repeat="album in albumsList" value="{{album.albumName}}" ng-bind="album.albumName">
</select>

但是没有运气，从我的搜索中我真的找不到任何可以回答这个问题的东西。它可能是ng-options，但据我所知，它不会生成带有绑定的选项。就像我在上面的代码中所做的那样。

我将如何实现这一目标？

【问题讨论】：

使用ng-options，然后设置model
仅供您注意。在您的 ng-init 指令中，您引用了错误的变量。它必须是 albumList[0] 而不是
@tymeJV 知道为什么：ng-options="opt as opt.albumName for albumList in album"，不起作用吗？
@Chrillewoodz，因为您可以互换使用opt 和album。你想要opt as opt.albumName for opt in albumList，或者album as album.albumName for album in albumList；但是，这与甚至不包括 opt as... 相同，因为您只是将其设置为完整对象。如果需要，可以使用它，例如，opt.id as opt.albumName for opt in albumList
@Tom 不幸的是，这两者都不起作用。它必须是“album asalbum.albumName”，因为我在原始代码中使用“album.albumName”作为绑定，对吧？跨度>

标签： javascript angularjs select option

【解决方案1】：

使用ng-options 指令构建您的列表，并包含一个具有空值的选项：

<select class="rounded bold"
        ng-model="selectedAlbum" 
        ng-options="album.albumName for album in albumsList">
  <option value="">-- choose album--</option>
</select>

见this jsBin

【讨论】：

【解决方案2】：

在您的控制器中，只需将 selectedAlbum 模型更改为您想要的值

$scope.selectedAlbum = albumsList[0].albumName

【讨论】：

【解决方案3】：

如果albumsList 发生变化，模型（selectedAlbum）可能与任何albumName 都不匹配。在这种情况下，selectedAlbum 将保持其先前的值，并且 Angular 将“未知”option 添加到您的select。据我了解您的问题，在这种情况下，您希望选择新 albumList 中的第一项（顺便说一句，我认为这是一个合理的操作）。
为了实现这一点，您可以观看albumList 并根据新的albumList 检查selectedAlbum 是否有效。如果没有，您可以将其更改为第一项：

$scope.$watch("alubmList", function(newAlbumList){
    if(angular.isArray(newAlbumList) && newAlbumList.length){
        var albumNames = newAlbumList.map(function(album){
            return album.name;
        });
        if(albumNames.indexOf($scope.selectedAlbum)<0)
            scope.selectedAlbum = newAlbumList[0].name;
    }
});

旁注： 你可以用 ng-options 重写你的 html：

<select class="rounded bold" ng-options="album.albumName for album in albumsList"></select>

【讨论】：

【解决方案4】：

你可以用旧的 JavaScript 来做这个：

var elementid=document.getElementById("elementid");
var unknown_option=elementid.options[1].value;
elementid.value=unknown_option;

//options[1] 选择第一个选项，如果 2 则选择第二个.. 等等但当然，如果你想要最后一个选项，你将不得不制作长度函数，然后循环或直接“倒排索引”:)

【讨论】：