將選定結果的值存儲在可導出到JSON的列表中

Question

我有一個角度應用程序，允許您搜索Spotify API。然後列出結果，用戶可以點擊+符號將選定的結果添加到右側的列表中。我可以使用jQuery添加項目，但我需要能夠使用Angular來完成此項目。結果列表（每個具有的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; 
    }); 
} 

The Markup

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