Question

我的网站允许用户搜索返回相关歌曲表的术语。当在搜索之后单击特定行中的“添加轨道”按钮时，相应的轨道名称和trackId被添加到表“播放列表”中。我遇到的问题是，一旦在另一行中单击“添加轨道”，该行中的数据就不会添加到“播放列表”表中，而只是替换以前的信息。我需要能够生成累积表。任何帮助都会很棒，并提前感谢！

<body ng-app>

    <body ng-app>

    <div ng-controller="iTunesController">
      {{ error }}
        <form name="search" ng-submit="searchiTunes(artist)">
         <input type="search" required placeholder="Artist or Song" ng-model="artist"/>
            <input type="submit" value="Search"/>
        </form>


        <div class="element"></div>
        <table id="SongInfo" ng-show="songs">
            <thead>
                <tr>
                   <th>Album Artwork</th>
                   <th>Track</th>
                   <th></th>
                   <th>Track Id</th>
                   <th>Preview</th>
                   <th>Track Info</th>
                   <th>Track Price</th>
                </tr>
            </thead>
            <tbody>
               <tr ng-repeat="song in songs">
                    <td><img ng-src="{{song.artworkUrl60}}" 
                         alt="{{song.collectionName}}"/> 
                    </td>
                    <td>{{song.trackName}}</td>
                    <td><button ng-click="handleAdd(song)">Add Track</button></td>
                    <td>{{song.trackId}}</td>
                    <td><a href="{{song.previewUrl}}">Play</a></td>
                    <td><a href="{{song.trackViewUrl}}">View Track Info</a></td>
                    <td>{{song.trackPrice}}</td>
                </tr>
            </tbody>
        </table>


    <table id="playlist">
      <thead>
                <tr>
                   <th>Playlist</th>
                </tr>
            </thead>
      <tbody>
        <tr ng-repeat="song in addedtracks">
            <td>{{song.trackName}}</td>
            <td>{{song.trackId}}</td>
        </tr>
      </tbody>
    </table>    
  </div>   
    </body>

itunes_controller.js

    var iTunesController = function($scope, $http){
     $scope.searchiTunes = function(artist){
             $http.jsonp('http://itunes.apple.com/search', {
                params: {
                    'callback': 'JSON_CALLBACK',
                    'term': artist,
                limit: 5,
                }
            }).then(onSearchComplete, onError)
        }
        $scope.handleAdd = function(song) {
        // this song object has all the data you need
        console.log("handle add ", song)
         $scope.addedtracks = [{song:'trackName', song:'trackID'}]
         $scope.addedtracks.push(song)
      }



    var onSearchComplete = function(response){
            $scope.data = response.data
            $scope.songs = response.data.results
        }

        var onError = function(reason){
            $scope.error = reason
        }

    }

Answer 1

我看到了您的代码存在的一些问题。首先是下面的代码

$scope.addedtracks = [{song:'trackName', song:'trackID'}]
$scope.addedtracks.push(song)

根据您的html，您将歌曲对象传递给 handleAdd 。所以只需从上面的代码中删除第一行。在该步骤之后，在 handleAdd 之前声明addtracks数组，如下所示

$scope.addedtracks = [];

修改播放列表的ng-repeat，如下所示：

<tr ng-repeat="song in addedtracks track by $index">
   <td>{{song.trackName}}</td>
   <td>{{song.trackId}}</td>
</tr>

就是这样。请注意，我使用了 track by $ index ，因为ngRepeat不允许在数组中使用重复项。有关更多信息，请阅读Tracking and Duplicates section。最后这是有效的plunker

使用来自不同表的数据填充和更新表

1 个答案: