нг-шоу и нг скрытие для элемента - при нажатии на один раз элемент скрыт, при нажатии еще раз, они оба вновь

Question

мой вопрос

У меня есть веб-страницу с двумя изображениями и текстом под которыми читает больше информации. Когда пользователь нажимает на «Дополнительная информация», я хочу, чтобы одна из других фотографий и текста была удалена, и чтобы оставить оставшуюся, на которую было нажата кнопка. Если пользователь снова нажимает на дополнительную информацию, я хочу, чтобы оба изображения были снова показаны. В настоящее время я могу удалить одно изображение, хотя и противоположное, на которое я нажимаю, но когда я нажимаю на текст ниже, они оба исчезают.

Пожалуйста, смотрите мой код ниже:

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

Я смотрел на нее в течение нескольких часов, и теперь моя голова находится в спина с этой логикой. Свежая пара глаз и входной сигнал были бы весьма признательны. Также, пожалуйста, дайте мне знать, если требуется дополнительная информация. Решение, приведенное ниже, работает до определенной точки, но не отображает оба изображения снова щелчком по желанию.

Answer 1

Старайтесь не использовать «это» внутри функции:

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

Answer 2

Теперь содержимое будет появляться и исчезать на основе мыши.

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, и я буду показывать как его

Надеется, что это работает :)