离子1-在按下按钮后隐藏按钮

Question

我试图在离子移动应用程序上按下按钮后隐藏按钮。但不是只隐藏该按钮，而是隐藏所有类似的按钮。如何个别隐藏1个按钮而不是隐藏所有内容？这是我试图实现的代码。

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; 
        }    
     }) 
    } 
     } 

任何帮助将不胜感激。

Answer 1

由于按钮具有共享模型数据，因此可能会出现此问题。您可以添加一个子控制器并围绕它来包装按钮。这将解决你的问题。看到完整的示例代码在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; 
    }; 
});