使用Angular动态渲染多个JSON对象

Question

如果应用程序搜索来自其他API的歌曲，则用户可以从结果搜索中选择一首歌曲，并将其附加到多个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' }, {...}, ] } 数组中的新对象。 JSON结构应如下所示：

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>

标记

Sub AddNameNewSheet1()
    ' 21 May 2017

    Dim WsStart As Worksheet
    Dim WsNew As Worksheet
    Dim AccName As String
    Dim Rl As Long                                  ' last row
    Dim R As Long                                   ' row counter

    AccName = InputBox("Name for new account?")
    If AccName = "" Then Exit Sub

    Set WsNew = Worksheets.Add
    With WsNew
        .Name = AccName
        .Cells(1, "D").Value = AccName
    End With

    Set WsStart = Worksheets("Start Page")
    With WsStart
        Rl = .Range("A" & Rows.Count).End(xlUp).Row
        For R = 1 To Rl
            Select Case .Cells(R, "A").value
                Case "Debit"
                    .Range("A1:G3").Value = Sheets("Account Styles").Range("A1:G3").Value
                Case "Credit", "Savings"
                    .Range("A2").Value = Sheets("Sheet1").Range("A1").Value
            End Select
        Next R
    End With
End Sub

以下是当前结果的显示方式。它只需要一次显示JSON，其中每首新歌都作为新对象添加到JSON，而不是它自己的JSON ：

应该如何显示，但JSON中应该有多个对象

Answer 1

将ng-repeat向上移动到播放列表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>

<强> LIVE DEMO