将选定结果的值存储在可导出到JSON的列表中

Question

我有一个角度应用程序，允许您搜索Spotify API。然后列出结果，用户可以单击+符号将选定的结果添加到右边的列表中。我可以用jQuery添加一个项目，但是我需要能够用角度来完成这个任务。所选结果的结果列表(每个字段都包含track、artist和album)应该导出到一个JSON数组对象中，如下所示：

{
  title: 'title of playlist'
  songs: [{
    track: 'title of track',
    artist: 'name of artist',
    album: 'name of album',
    note: 'a note that can be added from the UI',
    customImage: 'url of image that can be added manually'
  }]
}

控制器

function fetch() {
  $http.get("https://api.spotify.com/v1/search?q=" + $scope.search + "&type=track&limit=50")
    .then(function(response) {
      console.log(response.data.tracks.items);
      $scope.isTheDataLoaded = true;
      $scope.details = response.data.tracks.items;
    });
}

标记

<div ng-show="isTheDataLoaded">
    <div ng-repeat="song in details">
      <section class="col-xs-12 col-sm-6 col-md-12">
            <article class="search-result row">
                <div class="col-xs-12 col-sm-12 col-md-3">
                    <a ng-href="{{song.external_urls.spotify}}" title="{{song.name}}" class="thumbnail"><img src="{{song.album.images[0].url}}" alt="{{song.name}}" /></a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2">
                    <ul class="meta-search">
                        <li><i class="glyphicon glyphicon-user"></i> <span>{{song.followers.total}}</span></li>
                        <li><i class="glyphicon glyphicon-fire"></i> <span>{{song.popularity}}</span></li>
                        <li><i class="glyphicon glyphicon-tags"></i> <span>{{song.type}}</span></li>
                    </ul>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-7 excerpet">
                    <h3><a ng-href="#" title="">{{song.name}}</a></h3>
              <span class="plus"><a ng-href="#" id="{{song.name}}" title="{{song.name}}"><i class="glyphicon glyphicon-plus"></i></a></span>
                </div>
                <span class="clearfix borda"></span>
            </article>
        </section>
    </div>
  </div>

选择的结果应该附加到ul ：

<div class="col-md-4">
  <div class="playlist">
    <h3>Playlist</h3>
    <ul>
    </ul>
  </div>
</div>

我可以使用它将结果添加到列表中，但是如何将artist**，** album**，(注释)和图像url附加到结果列表？**

$('a').click(function () {
  var id = $(this).attr('id');
  $(".playlist ul").append("<li contenteditable='true'>"+id+"</li>");
});

Answer 1

试试这个：

向您的链接添加ng-单击

<span class="plus"><a ng-href="#" id="{{song.name}}" title="{{song.name}}" ng-click="addItem(song)"><i class="glyphicon glyphicon-plus"></i></a></span>

将控制器中的addItem函数设置如下

$scope.selectedSongs = [];
$scope.addItem = function(song){
    $scope.selectedSongs.push(song);
}

你所选择的结果应该是

<div class="col-md-4">
    <div class="playlist">
        <h3>Playlist</h3>
        <ul>
            <li ng-repeat="song in selectedSongs">
                {{song.name}}
                <div contenteditable='true'>Add Note</div>
                <div contenteditable='true'>Add Url</div>
            </li>
        </ul>
    </div>
</div>