arrays - Populate and update a table with data from a different table -
my site allows user search term returns table of associated songs. when "add track" button in particular row clicked after search, respective track name , trackid added table "playlist". problem having once "add track" clicked within different row, data row not added "playlist" table, rather replaces previous information. need able generate cumulative table. great , in advance!
<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) { // song object has data 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 } }
i saw issues code. first code below
$scope.addedtracks = [{song:'trackname', song:'trackid'}] $scope.addedtracks.push(song) acording html, passing song object handleadd. remove first line code above. after step, declare addedtracks array before handleadd below
$scope.addedtracks = []; modify ng-repeat playlist below:
<tr ng-repeat="song in addedtracks track $index"> <td>{{song.trackname}}</td> <td>{{song.trackid}}</td> </tr> and that's it. note used track $index because ngrepeat not allow duplicate items in arrays. more information read tracking , duplicates section. working plunker
Comments
Post a Comment