我有一个使用ng-repeat遍历从API获取的葡萄酒列表。我还有一个包含所有已添加到收藏夹的葡萄酒ID的数组变量,这些ID是从数据库中获取的。如果用户还没有将特定结果葡萄酒添加到列表中,我希望能够显示“添加到收藏夹”按钮。为了实现这一点,我认为可以采用以下方法:
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>
以下是我的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);
});
});
};
});
我对 .indexOf()
不是很了解,所以我认为问题可能出在这里。但也有可能是我错了。