Menu
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.
939
Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.
Track by $index in AngularJS The ngRepeat track by $index allows you to specify which items should be repeated using their index number. The ngRepeat is a directive that can be added to the HTML template of an Angular application. It is used for creating lists, and it can take an expression as an argument.
Definition and Usage. The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
You can nest two ng-repeat together in order to create a more complex table. The first ng-repeat in the tr tag will create the rows and the second one in the td tag will create one column per element in the collection.
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; }; }); 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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
