在嵌套数组上使用 ng-if 显示图标

Question

这个有问题。

我想检查用户是否已经为 post 添加了书签。如果有，我会显示一个添加的书签图标。

<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>

并添加书签

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

json 款//

  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
      })

我已经尝试了一些使用三元组和 ng-if 的方法，但未能return 实现所需的行为。我的直觉是使用过滤器来检查 post.id 是否存在于 book.post 数组中。然后在模板中使用 ng-if，但是我没能做到这一点。我是 angular 的新手，希望得到任何帮助。

*为清楚起见进行编辑。这与模板显示有关，如果 post.id 在用户书签数组中，我希望在其中显示 bookmark_border。如果 book.post.id 不在用户的书签数组中，我希望显示书签并让用户能够 addBookmark()

Answer 1

这是一种可能的解决方案：

您的模板循环遍历您的 post，检查每一个以查看它是否在已添加书签的 post 的用户列表中。如果是，您会看到添加的文本，否则您会看到书签按钮

    <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>

在您的组件中，您有 post 列表、用户和检查用户是否具有给定 post 并添加它的函数：

  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;
  }

这是一个笨蛋： https://plnkr.co/edit/H2taatK19iS7E9uzL8oP

在嵌套数组上使用 ng-if 显示图标

Displaying icon using ng-if on nested array

javascript

angularjs

angular-ng-if

ng-filter