javascript - 从 Angular 'ng-model' 选择元素中选择第一个选项，并带有按钮

Question

我无法找到通过单击下面的按钮来选择数组歌曲中的第一项的方法

我的代码:

  <div class="list-group-item">
         <p>
            Titel : <select ng-model="selectedSong" ng-options="song as song.title for song in songs.tracks"></select>
         </p>
         <p>
            Artiest : <select ng-model="selectedSong" ng-options="song as song.artist.name for song in songs.tracks"></select>
         </p>
         <p>
            Tijdstip : <select ng-model="selectedSong" ng-options="song as song.played_at for song in songs.tracks"></select>
         </p>
         <!-- <button ng-click="selectedSong.value == '1'"></button> -->
  </div>

为了清楚起见，我省略了其他代码。此时，当我在下拉列表中选择某些内容时，它正在使用 ng-model 指令查看下面的元素。在评论中，我尝试使用按钮上的 ng-click 指令来修复此问题，但我发现这是错误的。

Answer 1

在您的点击事件中，您必须将 selectedSong 设置为第一首 song

<button ng-click="selectedSong = songs.tracks[0]"></button>

如果您想确保您的轨道列表中有歌曲，您可以执行以下操作:

HTML:

<button ng-click="getFirstSong()"></button>

AngularJS(在你的 Controller 中):

$scope.getFirstSong() = function () {
    if ($scope.songs.tracks.length > 0) {
        $scope.selectedSong = songs.tracks[0];
    }
};