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

My site allows for a user to search for a term which returns a table of associated songs. When the "Add Track" button in a particular row is clicked after the search, the respective track name and trackId are added to the table "playlist". The problem I am having is that once "Add Track" is clicked within a different row, the data from that row is not added to the "playlist" table, but rather it just replaces the previous information. I need to be able to generate a cumulative table. Any help would be great and thanks in advance!

我的站点允许用户搜索一个术语，该术语返回相关歌曲的表。当搜索后单击某一行中的“添加跟踪”按钮时，将相应的跟踪名和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
        }

    }

1 个解决方案

#1

I saw some issues with your code. First the code below

我看到你的代码有一些问题。第一次下面的代码

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

Acording to your html, you are passing the song object to the handleAdd. So just remove the first line from code above. After that step, declare addedtracks array before handleAdd like below

与html合并后，将把song对象传递给handleAdd。从上面的代码中删除第一行。在此步骤之后，像下面这样在handleAdd之前声明addedtracks数组

$scope.addedtracks = [];

Modify the ng-repeat for the playlist like below:

修改以下播放列表的ng-repeat:

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

And that's it. Note that I used track by $index because ngRepeat does not allow duplicate items in arrays. For more information read Tracking and Duplicates section. Finally this is working plunker

就是这样。注意，我使用了$index跟踪，因为ngRepeat不允许数组中的重复项。有关更多信息，请阅读跟踪和复制部分。最后是工作柱塞

#1