我有一个角度应用程序,允许您搜索Spotify API。然后列出结果,用户可以单击>> float?("1.2")
=> true
>> float?("1")
=> true
>> float?("1 000")
=> false
>> float?("abc")
=> false
>> float?("1_000")
=> true
符号将选定的结果添加到右侧的列表中。我可以使用jQuery添加一个项目,但我需要能够使用Angular执行此操作。应将所选结果中的结果列表(每个字段都包含+
,track
和artist
)导出到JSON数组对象中,如下所示:
album
控制器
{
title: 'title of playlist'
songs: [{
track: 'title of track',
artist: 'name of artist',
album: 'name of album',
note: 'a note that can be added from the UI',
customImage: 'url of image that can be added manually'
}]
}
标记
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;
});
}
所选结果应附加到<div ng-show="isTheDataLoaded">
<div ng-repeat="song in details">
<section class="col-xs-12 col-sm-6 col-md-12">
<article class="search-result row">
<div class="col-xs-12 col-sm-12 col-md-3">
<a ng-href="{{song.external_urls.spotify}}" title="{{song.name}}" class="thumbnail"><img src="{{song.album.images[0].url}}" alt="{{song.name}}" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<ul class="meta-search">
<li><i class="glyphicon glyphicon-user"></i> <span>{{song.followers.total}}</span></li>
<li><i class="glyphicon glyphicon-fire"></i> <span>{{song.popularity}}</span></li>
<li><i class="glyphicon glyphicon-tags"></i> <span>{{song.type}}</span></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-7 excerpet">
<h3><a ng-href="#" title="">{{song.name}}</a></h3>
<span class="plus"><a ng-href="#" id="{{song.name}}" title="{{song.name}}"><i class="glyphicon glyphicon-plus"></i></a></span>
</div>
<span class="clearfix borda"></span>
</article>
</section>
</div>
</div>
此处:
ul
我可以使用它将结果添加到列表中,但如何将<div class="col-md-4">
<div class="playlist">
<h3>Playlist</h3>
<ul>
</ul>
</div>
</div>
,artist
,注释和图片网址附加到结果列表中?
album
答案 0 :(得分:0)
试试这个:
在您的链接中添加ng-click
var fFirstname = 'test';
$.ajax({
async: false,
cache: false,
type: 'post',
url: 'dostuff/234',
data: {
email: "fEmail",
firstname: "fFirstname",
lastname: "fLastname",
zipcode: "fZipcode",
optout: "fOptout"
},
dataType: "text",
error: function(xhr, status, error) {
alert(status);
alert(xhr.responseText);
},
success: function(response) {
overlay.appendTo(document.body);
setTimeout(function() {
finishUp();
}, 3000);
}
});
从控制器设置addItem函数,如下所示
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
,您的选定结果应为
<span class="plus"><a ng-href="#" id="{{song.name}}" title="{{song.name}}" ng-click="addItem(song)"><i class="glyphicon glyphicon-plus"></i></a></span>