使用ng-repeat遍历以歌曲名称为索引的对象

Question

我有一个使用歌曲名称创建的对象，因此可以动态添加并跟踪一系列播放列表中歌曲的出现情况。 这是一个例子：

{tracks：Object} 1,2,3-Remix：Object
trackAlbum：“精选集”
trackCount：1
trackImage： https ://i.scdn.co/image/26b654ecbe60b28397e6d8b5d829cebeeeb5590a“
trackName：“ 1,2,3-混音”

我想做的是在html中，使用ng-repeat通过trackCount（从最高到最低）对每首歌曲进行排序，然后将其显示在列表中。 这是当前代码：

<div ng-app="myApp" ng-controller="myCtrl">
<form id = "playlistSearch" name="playlistForm">
<div class="form-group">
  <label>Spotify playlist search:</label>
  <input name = "search" ng-minlength = 3 placeholder = "Enter your    search.." ng-model = "playlist" class = "form-control" required></input>
  <p class = "help-block" ng-show = "playlistForm.search.$error.minlength">Enter 3+ characters</p>
</div>

<div class = "form-group">
  <button ng-disabled = "playlistForm.search.$invalid" class = "btn btn-primary" ng-click = "getPlaylists()" type = "submit">Submit</button>
</div>
</form>
<div class = "container-fixed, results">
 <ol>
 <li ng-repeat = "track in allTracks | orderBy: 'trackCount'"> {{allTracks.trackName}} {{allTracks.trackAlbum}} {{allTracks.trackCount}}</li>                                                       
  </ol>
</div>

Answer 1

您的html结构不正确，应关闭li标签，然后在ng-repeat div中使用track而不是allTracks ，这将为您提供对allTracks对象的每个元素的访问权限。

码

<ol>
    <li ng-repeat = "track in allTracks | orderBy: 'trackCount'">
       {{track.trackName}} {{track.trackAlbum}} {{track.trackCount}}
    </li>                                                       
</ol>