Creating a Favorite page - Clicking a button to add elements to another page


#1

For an Ionic app project, I created a json file that stores some event data. This file will later be downloaded within the application and stored locally on the device/ but might be updated to provide new data.

I displayed the data on the artist page with a ng-repeat directive. The problem I am facing is the following: Everytime when the user clicks the plus button on one of the elements, the element is supposed to be displayed on another page (kind of favorite page). What can be a solution to this problem?

HTML

  <ion-item
          ng-repeat='item in artists | filter: query' class="artist-box">
              <div class ="info-box-purple" >
                  <div class = "info-box-text">
                      <span>{{item.day | Saturday}}<br>{{item.time}}<br>{{item.stage}}</span>
                  </div>
              </div>
              <a href="#/app/artists/{{item.shortname}}">
                  <h3 class="artist-title"><span>{{item.name}}</span></h3>
                  <div class="item image item-image">
                      <img ng-src="img/artists/{{item.shortname}}.jpg" alt="{{item.name}} Photo"/>
                  </div>
              </a>
              <div><button class="add-button button button-royal ion-plus"></button></div>

          </ion-item>

Controller (link between html and controller on separate page)

   .controller('ListController', ['$scope', '$http', '$state', function($scope, $http, $state){
        $http.get('js/data.json').success(function(data) {
            $scope.artists = data;
            $scope.pickedartist = $state.params.bandId;
        });
    }
])

Format of JSON file

[
    {
        "festival" : "festival 1",
        "day" : "Friday",
        "time" : "17:00",
        "stage" : "Stage 1",
        "name" : "Balkan Beat Box",
        "shortname" : "Balkan_Beat_Box",
        "bio" : "Balkan Beat Box (BBB) is an Israeli musical group founded by Tamir Muskat, Ori Kaplan and now including Tomer Yosef as a core member. The group plays Mediterranean-influenced music that incorporates Jewish, Eastern Europe (mainly Balkan) and Middle Eastern traditions, Gypsy punk, reggae and electronica. As a musical unit they often collaborate with a host of other musicians both in the studio as well as live.",
        "facebook" : "https://www.facebook.com/balkanbeatbox",
        "schedule" : "+"

    },{
        "festival" : "festival 1",
        "day" : "Friday",
        "time" : "18:00",
        "stage" : "Stage 2",
        "name" : "Blick Bassy",
        "shortname" : "Blick_Bassy",
        "bio" : "Born in 1974, singer, songwriter, guitarist and percussionist Blick Bassy grew up with 20 siblings in Cameroon’s capital Yaoundé, a city where people from all parts of the country come together, and the first languages are French and English. Bassy says: “People in Yaoundé lose their traditions and culture rapidly because they don’t speak in their mother tongues with each other or their children. My family is part of the Bassa ethnic group, a nomad tribe that originally comes from Egypt and has descendents down in South Africa. But nowadays people stay in one place because they need visas to cross borders. The word ‘bassa’ means ‘people from the earth’.”",
        "schedule" : "+"
    },{
        "festival" : "festival 1",
        "day" : "Friday",
        "time" : "19:00",
        "stage" : "Stage 3",
        "name" : "Clueso",
        "shortname" : "Clueso",
        "bio" : "Thomas Hübner (born April 9, 1980), better known by his stage name Clueso (pronounced [klyˈzo]), is a German singer, rapper, songwriter and producer. Born in Erfurt, he started performing at the age of 15. His first album Text und Ton was released in 2001. In 2011, Clueso released his album An und für sich, which reached number 2 on the German Top 100. In 2016, he released his latest album Neuanfang, peaking at number 1 on the German Top 100. His music is notable for being a mix of hip hop, pop and electronic music, and sometimes reggae.",
        "schedule" : "-"
    }]