Check if value is in array for ng-if within ng-repeat

Question

I have an ng-repeat looping through a list of wines retrieved from an API. I also have a array variable containing all wine ids that have been added to favorites fetched from database. I want to be able to display an "Add To Favorites" button if the user has not yet added a specific result wine from the list. To do this I thought I would do something like:

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>         <!-- If wine.Id is not yet in the array of all favorite ids, display "Add Button" -->         <a href="#" class="btn btn-primary btn-dark" ng-click="addToFavorites(wine.Id)" ng-if="favorites.indexOf(wine.Id) !> -1"> Add </a>         <!-- Else Display Already Added -->         <span ng-if="favorites.indexOf(wine.Id) > -1">Added</span>     </td> </tr> 

Here is my JS:

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 new to .indexOf() so I am thinking maybe that is the problem. But Maybe I am wrong.

Answer 1

You can use angular-filter's contains filter:

<span ng-if="favorites | contains:wine.Id">Added</span> 

or write your own filter that does the same:

angular.module('module').filter('contains', function() {   return function (array, needle) {     return array.indexOf(needle) >= 0;   }; }); 

Answer 2

I would recommend you to move this logic to controller an keep your view as clean as possible:

   $scope.isFavorites = function(id) {        return $scope.favorites.indexOf(id) !== -1;    } 

And your view should be:

<!-- If wine.Id is not yet in the array of all favorite ids, display "Add Button" --> <a href="#" class="btn btn-primary btn-dark" ng-click="addToFavorites(wine.Id)" ng-if="!isFavorites(wine.Id)">Add</a> <!-- Else Display Already Added --> <span ng-if="isFavorites(wine.Id)>Added</span>