NG-展示和NG-隱藏的元素 - 點擊時一旦項目被隱藏，再次點擊時，他們都重新出現

我的問題NG-展示和NG-隱藏的元素 - 點擊時一旦項目被隱藏，再次點擊時，他們都重新出現

我有兩個圖像和文字在其下讀取更多信息的網頁。當用戶點擊「更多信息」時，我希望刪除其中一張照片和文字，並留下被點擊的照片和文字。如果用戶再次點擊更多信息，我希望再次顯示兩個圖像。目前我可以刪除一張圖片，儘管我點擊的圖片是相反的，但是當我再次點擊下面的文字時，它們都會消失。

請參閱下面我的代碼：

HTML

<div ng-repeat="package in Packages.packageCards" 
ng-hide="package.packNum === Packages.packageNum" ng-show="Packages.showBoth"> 
    <h3 class="pack-title">{{package.packTitle}}</h3> 
    <img ng-src="{{package.pic}}"/> 
    <p ng-click="Packages.showPackDetails(package.packNum)">More Information</p> 
</div>

JS角控制器

this.showBoth = true; 

this.showPackDetails = function(packNum){ 
    this.showBoth = !this.showBoth; 
    this.packageNum = packNum; 
} 

this.packageCards = [ 
      { 
       packTitle: "Package 1", 
       pic: "/images/packages/package-1.jpg", 
       scrollTo: "package_one_description", 
       packNum: 1 
      }, 
      { 
       packTitle: "Package 2", 
       pic: "/images/packages/package-2.jpg", 
       scrollTo: "package_two_description", 
       packNum: 2 
      } 
     ];

我一直在尋找好幾個小時，現在我的頭在用這個邏輯旋轉。一個新的眼睛和輸入將不勝感激。另外，請讓我知道是否需要更多信息。下面提供的解決方案適用於某個點，但不會根據需要再次單擊這些圖像。

來源

2015-09-07 Paul Fitzgerald

你能提供的jsfiddle這將複製您問題。 – Thinker

我可以做@Thinker –

函數內的「this」並不總是引用你定義的那個函數的對象。將其緩存到控制器中的局部變量：var self = this;然後在你的函數處理程序中使用「self」而不是「this」 – Rustam

儘量不要使用「這個」內部功能：

var self = this; 
self.showBoth = true; 

self.showPackDetails = function(packNum){ 
    self.showBoth = !self.showBoth; 
    self.packageNum = packNum; 
} 

self.packageCards = [ 
    { 
     packTitle: "Package 1", 
     pic: "/images/packages/package-1.jpg", 
     scrollTo: "package_one_description", 
     packNum: 1 
    }, 
    { 
     packTitle: "Package 2", 
     pic: "/images/packages/package-2.jpg", 
     scrollTo: "package_two_description", 
     packNum: 2 
    } 
];

來源

2015-09-07 10:59:24

一切都已經建立在角度項目使用'這個' –

現在的內容將出現和消失基於點擊。

myApp.controller("MyCtrl", function($scope) { 
    $scope.showBoth = true; 
    $scope.packageNum =0; 
    $scope.showPackDetails = function(packNum){ 
     if($scope.packageNum != 1) 
      $scope.packageNum = packNum; 
     else 
      $scope.packageNum = 0; 
    } 

    $scope.packageCards = [ 
     { 
      packTitle: "Package 1", 
      packNum: "1" 
     }, 
     { 
      packTitle: "Pack", 
      packNum: "2" 
     } 
    ]; 
});

我所做的是，在第二次點擊，我會讓$scope.packageNum爲0，我將同時顯示它

希望工程:)

來源

2015-09-07 11:41:52 Thinker

謝謝思想家。一些工作的方式，但它仍然非常bugng –

是的。我正試圖弄清楚 – Thinker

NG-展示和NG-隱藏的元素 - 點擊時一旦項目被隱藏，再次點擊時，他們都重新出現

回答

相關問題