離子1-按下按鈕后隱藏按鈕

Question

我試圖在離子移動應用程序上按下“贊”按鈕后將其隱藏。 但是，它不僅隱藏了該按鈕，還隱藏了所有類似的按鈕。 如何單獨隱藏一個按鈕而不是隱藏所有按鈕？ 這是我嘗試實現的代碼。

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

由於Button具有共享的模型數據，因此可能會出現此問題。 您可以添加一個子控制器，並在其周圍包裝按鈕。 那將解決您的問題。 請參閱完整的示例代碼， 網址為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;
  };
});