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

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

尽量不要在函数内部使用“this”：

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，我将显示它们

希望它有效:)