Question

我正在尝试在选择下拉列表中预先选择一个选项，如果选项的值是静态的，我知道该怎么做。但如果他们动态变化怎么办？在我的情况下，我得到了一个更新很多的专辑列表，所以我永远不知道选项的价值是多少。我尝试使用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但是从我看到的那些不会生成带有绑定的选项。就像我在上面的代码中所做的那样。

我将如何实现这一目标？

Answer 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

Answer 2

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

$scope.selectedAlbum = albumsList[0].albumName

Answer 3

如果albumsList发生变化，则模型（selectedAlbum）可能与任何albumName都不匹配。在这种情况下，selectedAlbum将保留其先前的值，而角度会为您的option添加“未知”select。正如我理解你的问题，在这种情况下，你想要选择新albumList中的第一项（我认为这是一个合理的行动）。
为实现此目的，您可以根据新的albumList观看selectedAlbum并检查albumList是否有效。如果没有，您可以将其更改为第一项：

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

Answer 4

简单地说，您可以使用旧版JavaScript：

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

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

预先选择＆＃34;未知＆＃34; AngularJS中的选项

4 个答案: