Displaying icon using ng-if on nested array

Question

Having trouble with this one.

I am looking to check if a user has already bookmarked a post. If they have I display a added bookmark icon.

<div ng-repeat="post in posts>
<div ng-repeat="book in userbookmarks">
    <div ng-if="book.post.id === post.id">
        <i class="material-icons">
            bookmark_border
        </i>
        Added
    </div>
</div>
</div>

and to add a bookmark

<div class="bookmark" ng-click="addBookmark()">
    <md-button>
        <i class="material-icons">bookmark</i>
    </md-button>
</div>

json models//

  function requestItem(){
getServiceData.get(function(data){
$scope.posts = data.posts;
$scope.current_user = data.current_user;
console.log($scope.posts);
console.log($scope.current_user);

})
 }

  var getBookmarks = bookmarkData.query();
    getBookmarks.$promise.then(function(data, status, headers, 
     config){
     $scope.bookmarks= data
      })

I have tried a few approaches using ternaries and ng-if but haven't been able to return desired behavior. My instinct was to use a filter to check if the post.id exists inside the book.post array. Then use an ng-if inside the template, however I haven't been able to accomplish this. Am new to angular and would appreciate any help.

*edit for clarity. This is concerning the template display where I am looking to show bookmark_border if the post.id is inside the users array of bookmarks. If the book.post.id is not in the user's bookmarks array I am looking to show the bookmark and give the user the ability to addBookmark()

Answer 1

Here's one possible solution:

Your template loops through your posts, checking each one to see if its in the users list of bookmarked posts. If it is you see an Added text, otherwise you see a button to bookmark

    <div class="post" *ngFor="let post of posts">
       {{post.Text}}
      <div class="bookmark-button" *ngIf="!isBookmarked(post.Id)" (click)="addBookmark(post)">Bookmark</div>
      <div class="bookmark-button" *ngIf="isBookmarked(post.Id)">Added!</div>
    </div>

In your component you have the list of posts, the user and functions to check if the user has a given post, and to add it:

  user = {
      bookmarks: [];
    }

    posts = [
      {
        Id: 1,
        Text: "Woot Woot"
      },
      {
        Id: 2,
        Text: "Angular 4 the win!"
      },
      {
        Id: 3,
        Text: "Awesomesauce"
      }  
    ]

    addBookmark(post) {
      if(!this.isBookmarked(post.Id))
        this.user.bookmarks.push(post.Id);
    }

    isBookmarked(id){
      for(var i = 0; i < this.user.bookmarks.length; i++){
        if(this.user.bookmarks[i] === Number(id)){
          return true;
        }
      }
      return false;
  }

Here's a plunker: https://plnkr.co/edit/H2taatK19iS7E9uzL8oP