In my current Ionic project, I am working on a feature that allows users to add drinks to their favorite list. These drinks are sourced from two different views: View 1 displays a general list of drinks while View 2 shows newly added drinks. Each view has its own detail page associated with it.
When a user navigates to the My Favorites view, they will see all of their favorite drinks from both View 1 and View 2. Clicking on a drink from View 1 should lead to a different URL compared to clicking on a drink from View 2.
Below is the code snippet for the Favourites view:
<ion-content class="padding">
<div class="row responsive-md">
<div class="col col-33">
<div>
<!-- View 1 GENERAL LIST OF DRINKS -->
<a href="#/app/gin-mixes-detail/{{drink.id}}" class="grid-gin-mixes" ng-repeat="drink in favs = (user.current.favorites) track by $index">
<img class="gin-mixes-placeholder" ng-src="{{drink.src}}">
<p>{{drink.title}}</p>
</a>
<!-- View 2 NEWLY ADDED DRINKS -->
<a href="#/app/newly-added-detail/{{drink.id}}" class="grid-gin-mixes" ng-repeat="drink in favs = (user.current.favorites) track by $index">
<img class="gin-mixes-placeholder" ng-src="{{drink.src}}">
<p>{{drink.title}}</p>
</a>
</div>
</div>
</div>
</ion-content>I am looking for guidance on how to ensure that when a user clicks on a drink from View 2, the correct URL is used. Would using either ng-if or ng-switch be the best approach for this? How should I go about implementing it?