javascript - WishList bool 切换按钮切换 ng-repeat 中的所有项目而不是单个项目

Question

在 ng-repeat="item in items" 中，我有一个 Wishlist bool 按钮，它可以是 true 或 false。

<div ng-repeat="item in items" ng-controller="ItemCtrl as ctrl">
  <md-button class="md-icon-button" ng-click="ctrl.toggleWish(item)">
    <i class="material-icons">{{ctrl.hasWished(item) ? 'favorite' : 'favorite_border' }}</i>
  </md-button>
</div>

使用 hasWished(item) 函数，我检查当前登录的用户 ID (Auth._currentUser.id) 是否在愿望列表中存储的用户 ID 内的项目。

单个 item 的 JSON 输出看起来像这样简化:

{"id":1,"title":"This is a tile","wishes":2,"wishlists":[{"user_id":2},{"user_id":3}]}

所以 hasWished(item) 函数应该返回 true 或 false:

  this.hasWished = function(item) {
    return item.wishlists.some(function(wishlist) {
      return wishlist.user_id === Auth._currentUser.id  // returns true if currently logged in user id is on wishlist
    });
  };

到目前为止，这是有效的。使用 toggleWish 函数，我想将 hasWished(item) 从 true 切换为 false，反之亦然:

  this.toggleWish = function(item) {
    if (!this.hasWished(item)) {
      this.hasWished = function(item){return true};
      items.wish(item); // sends PUT request to API
      item.wishes += 1;
      ToastService.show(item.title + ' added to Wish List');
    } else {
      this.hasWished = function(item){return false};
      items.unWish(item); // sends DELETE request to API
      item.wishes -= 1;
      ToastService.show(item.product + ' removed from Wish List');
    }
  };

目前 toggleWish 确实会切换，但会将 ng-repeat="item in items" 中的所有 items 切换为 true 或 false(取决于它们之前是 true 还是 false) .而不是仅单击 toggleWish(item) 按钮的单个项目。

我需要以某种方式将每个项目的 hasWished 设置为 true 或 false - 独立于其他项目，同时仍然检查用户之前是否希望该项目(使用当前的 hasWished 函数)。

我被困在这里，感谢您的建议!

Answer 1

this.hasWished = function(item){return true};

是 Controller 中的一个函数，所以它不是特定于某个项目的东西。您应该在项目中存储一个标志。有点像

 this.toggleWish = function(item) {
    if (!this.hasWished(item)) {
      items.wish(item); // sends PUT request to API
      item.hasWished = true;
      item.wishes += 1;
      ToastService.show(item.title + ' added to Wish List');
    } else {
      items.unWish(item); // sends DELETE request to API
      itme.hasWished false;
      item.wishes -= 1;
      ToastService.show(item.product + ' removed from Wish List');
    }
  };

然后在 html 中使用该标志来显示或不显示

{{item.hasWished ? 'favorite' : 'favorite_border' }}