CODEWITHSUNDEEP
javascriptangularjsionic-framework
Aslah Fida'iyi
Aslah Fida'iyi

Reputation: 41

Ionic 1 - Hiding a Button after it being pressed

I'm trying to hide the like button after it is being pressed on my ionic mobile application. But instead of hiding only that button, it hides all of the like buttons instead. How do I hide only 1 button individually instead of hiding everything? Here is my code that I tried to implement.

activities.html:

  <div class="item item-text-wrap" ng-repeat="activities1 in activities" id = $index>
      <div>
   Seen on: {{activities1.viewedDate}}
      <br>
      {{activities1.title}}
          </div>
          <iframe width="420" height="315" src="{{activities1.url}}"></iframe>
          <div class="item item-input-inset">
                       <button class="button button-full button-balanced" ng-click="invertLike(activities1);" ng-hide="ShowDiv">
                           Like!
                        </button>
              <button class="button button-full button-assertive" ng-click="Dislike(activities1);" ng-hide="ShowDiv2">
                           Unlike!
                        </button>
                    </div>
          </div>

Controller.js:

        database.ref('/activitiesInvite/'  ).orderByChild("name").equalTo(username).on('value', function(activitys){
        $scope.activities = activitys.val();


             $scope.invertLike = function(index) {
            var id = index.id;

firebase.database().ref('activitiesInvite').orderByChild("id").equalTo(id).on("value",    function(snapshot) 
        {
     {
           var key;
         $scope.check = snapshot.val().interest;
         console.log($scope.check);


    snapshot.forEach(function (childSnapshot) {
      key = childSnapshot.key;
    })
    if(key)
    {
       firebase.database().ref('/activitiesInvite/' + key).on("value", function(test)
        {

           firebase.database().ref().child('/activitiesInvite/' + key)
             .update({ interest: "user has liked", });

               if($scope.check != "")
                   {
                      $scope.ShowDiv = true;
                   }            
       }) 
    }
        }

Any help will be greatly appreciated.

Upvotes: 0

Views: 61

Answers (1)

DevCod
DevCod

Reputation: 300

The issue might be occurring as the Buttons have shared model data. You can add a child controller and wraps the buttons around it. That will solve your problem. See the complete Sample Code at https://plnkr.co/edit/eVgedv9WFGmKewcI7j6C?p=preview

//Main Module, Main Controller
angular.module('myApp', []).controller('MainCtrl', function($scope) {
  $scope.activities = [{
    title: 'Jani',
    url: 'www.google.com',
    viewedDate: new Date().toLocaleDateString("en-US")
  }];
  $scope.ShowDiv = false;
  $scope.ShowDiv2 = false;
})
//Child Controller (Isolate the Scope of the variables from Parent Controller)
.controller('ChildCtrl', function($scope) {
    $scope.invertLike = function(activities1) {
    //Scope Inherited From Parent
    $scope.ShowDiv = true;
  };
  $scope.Dislike = function(activities1) {
    //Scope Inherited From Parent
    $scope.ShowDiv2 = true;
  };
});

Upvotes: 1

Related Questions