Currently, I have a loop using ng-repeat that goes through a list of wines obtained from an API. Alongside this, there is an array variable containing all the IDs of wines that have been marked as favorites and retrieved from the database. My goal is to show an "Add To Favorites" button if a specific wine from the result list has not yet been added by the user. This is what I had in mind for achieving this:
HTML:
<tr ng-repeat="wine in wines">
<td>{{$index+1}}</td>
<td>{{ wine.Name }}</td>
<td>{{ wine.Appellation.Name }}</td>
<td>${{ wine.PriceMin }} - ${{ wine.PriceMax }}</td>
<td>
<!-- Show "Add Button" if wine.Id is not in the favorite ids array -->
<a href="#" class="btn btn-primary btn-dark" ng-click="addToFavorites(wine.Id)" ng-if="favorites.indexOf(wine.Id) !> -1"> Add </a>
<!-- Display "Added" if already in favorites -->
<span ng-if="favorites.indexOf(wine.Id) > -1">Added</span>
</td>
</tr>
Below is my JS code:
app.controller("MainController", function($scope, $http){
$scope.favorites = [];
var getAllFavorites = function(){
$http.get("/home/getAllFavoriteIds").success(function(response) {
angular.forEach(response, function(r) {
$scope.favorites.push(r);
});
});
};
});
I am still new to .indexOf() so there may be an issue with its usage in my case. Any tips or guidance would be greatly appreciated.