Angularjs 动态呈现具有角度的多个JSON对象

给定一个从rest api搜索歌曲的应用程序，用户可以从搜索结果中选择一首歌曲，并将其附加到多个

ul

列表的播放列表中。每个新添加的结果都应该附加到播放列表显示下方JSON视图中的

songs

数组中的新对象。JSON结构应该如下所示：

{
    title: 'Top 10 songs'
    songs: [
       {
           artist: 'artist name',
           album: 'name of album',
           note: 'note added from content editable line',
           imageurl: 'url to image'

       },
       {
           artist: 'artist name',
           album: 'name of album',
           note: 'note added from content editable line',
           imageurl: 'url to image'
       },
       {   
           artist: 'artist name',
           album: 'name of album',
           note: 'note added from content editable line',
           imageurl: 'url to image'
       },
       {...},
    ]
}

这是我的控制器：

angular.module('myApp', []).controller('MusicController', function($scope, $http) {
$scope.$watch('search', function() {
  fetch();
});

$scope.search = "";
$scope.listLimit = "10";
$scope.selectedSongs = [];
$scope.addItem = function(song){
    $scope.selectedSongs.push(song);
}
$scope.remove = function(index) {
    $scope.selectedSongs.splice(index, 1);
};

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;
    });
}

$scope.showJson = function() {
  $scope.jsonStringified = angular.toJson($scope.selectedSongs, true);
}
});

标记

<div class="col-md-6">
  <div class="playlist">
    <h3 class="playlist-title" ng-model="playlistTitle">Top 10 Playlist</h3>
    <div class="songs" ng-repeat="song in selectedSongs track by $index | limitTo: listLimit">
      <div ng-repeat="artist in song.artists">
        <p ng-model="song.name">{{song.name}}</p>
        <p ng-model="artist.name">{{artist.name}}</p>
        <input type="text" ng-model="song.note" placeholder="add note">
        <input type="text" ng-model="song.image" placeholder="add image url">
        <a class="btn btn-default" ng-click="remove($index)">Remove</a>
        <pre class="result">
          [
          title: 'Top 10 Playlist'
          songs: [
            {
              album: '{{song.name}}',
              artist: '{{artist.name}}',
              note: '{{song.note}}',
              coverImage: '{{song.image}}'
            }
          ]
        </pre>
      </div>
    </div>
</div>

十大播放列表
{{song.name}
{{artist.name}

这就是它的显示方式，但是JSON中应该有多个对象

将ng repeat向上移动到playlist div元素

<div class="col-md-6">
    <div class="playlist">
      <h3 class="playlist-title" ng-model="playlistTitle">Top 10 Playlist</h3>

      <div class="songs" ng-repeat="song in selectedSongs track by $index | limitTo: listLimit">
        <p ng-model="song.name">{{song.name}}</p>

        <input type="text" ng-model="song.note" placeholder="add note">
        <input type="text" ng-model="song.image" placeholder="add image url">
        <a ng-click="remove(song)"><i class="glyphicon glyphicon-remove-sign"></i></a>
      </div>
      <pre>
          [
          title: 'Top 10 Playlist'
          songs: [
        <div ng-repeat="song in selectedSongs">
        <div ng-repeat="artist in song.artists ">
          {
              album: '{{song.name}}',
              artist: '{{artist.name}}',
              note: '{{song.note}}',
              coverImage: '{{song.image}}'
            }
        </div>
      </div>
          ]
        }
      </pre>
    </div>
  </div>


十大播放列表
{{song.name}
我以前试过，但这正是每首歌之后获得JSON的原因。我需要将JSON放在列表的底部，添加的每首歌曲都应该向显示的JSON中的
songs:
数组添加一个新对象。我想我需要向控制器中的
addItem
函数添加功能，将特定的JSON字段添加到JSON结果中，但不确定。没有添加选项。只有remove存在。请看控制器的第9行：
$scope.addItem=function（song）{$scope.selectedSongs.push（song）；}
您能创建一个plunker吗？用这个