ng-show和ng-hide for element - 一旦隐藏了一个项目，当再次单击时，它们都会重新出现

Question

My issue

I have a webpage with two images and text underneath which reads more information. When the user clicks on 'More Information' I wish for one of the other photo and text to be removed and to leave the one remained which was clicked on. If the user clicks on more information again, I wish for both images to be shown again. Currently I can remove one image, albeit the opposite one I click on, but when I click on the text below again they both disappear.

Please see my code below:

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 Angular Controller

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

I have been looking at it for hours and now my head is in a spin with this logic. A fresh pair of eyes and input would be greatly appreciated. Also, please let me know if any more information is required. The solution provided below works to a point, but does not show both images again on click as desired.

Answer 1

Try not to use "this" inside function:

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

Now the content will appear and disappear based on the click.

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

what i did is, on the second click, i will make $scope.packageNum to 0 and i will display both of it

Hope it works :)