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.
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
}
];
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 :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.