Is there a way to maintain the CSS class for the first property ID even when clicking on a second property ID? Currently, the CSS class is removed from the first property ID when a second one is clicked. How can I make sure the CSS class remains for the first property ID until it is specifically removed?
Below is the code snippet:
<div class="hmpal-prprt-post-wdgt hmpal-prprt-wishlist"
ng-click="WishlistAdd($index,project.propertyId)"
ng-class="getClass($index)"
ng-repeat="prop in homepalGroupProp.properties">
<a href="">
<span class="prprt-icon">
<i class="fa fa-heart" aria-hidden="true"></i>
</span>
<span>Wishlist</span>
</a>
</div>
Here is my controller code:
var selectedProductId = null;
a.selectedIndex = -1;
a.WishlistAdd = function ($index, propertyId) {
if ($index === a.selectedIndex) {
a.selectedIndex = -1;
} else {
a.selectedIndex = $index;
}
selectedProductId = (selectedProductId === propertyId ? null : propertyId);
var data = {
wishlistFlag: (selectedProductId !== null),
propertyId: propertyId
};
e.createWishLists(data).then(function (result) {
console.log(JSON.stringify(result));
a.wishlistFlag = result.config.data.wishlistFlag;
alert(a.wishlistFlag);
}, function (error) {
alert("error");
});
}
Function for adding the class:
a.getClass = function(ind){
if( ind === a.selectedIndex ){
return "selected";
} else{
return "";
}
}