将所选结果的值存储在可导出为JSON的列表中

时间:2017-05-20 02:44:23

标签: jquery angularjs json

我有一个角度应用程序,允许您搜索Spotify API。然后列出结果,用户可以单击>> float?("1.2") => true >> float?("1") => true >> float?("1 000") => false >> float?("abc") => false >> float?("1_000") => true 符号将选定的结果添加到右侧的列表中。我可以使用jQuery添加一个项目,但我需要能够使用Angular执行此操作。应将所选结果中的结果列表(每个字段都包含+trackartist)导出到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

1 个答案:

答案 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>