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

Question

在ng-repeat="item in items"我有一个Wishlist布尔按钮，可以是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做切换，但切换所有items中ng-repeat="item in items"为true或false（取决于如果他们之前是真或假）。 而不是只有单个项目，其中单击了toggleWish(item)按钮。

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

我被困在这里，我感谢你的建议！

Answer 1

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

是控制器中的一个函数，因此它不是特定于项目的东西。 您应该在项目中存储一个标志。 就像是

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

Answer 2

获取JSON后，计算模板可以使用的标志。

然后切换那些标志。

HTML

<div ng-repeat="item in items" ng-controller="ItemCtrl as ctrl">
  <md-button class="md-icon-button" ng-click="ctrl.toggleWishFlag($index)">
    <i class="material-icons">
        {{ctrl.flags.wish[$index] ? 'favorite' : 'favorite_border' }}
    </i>
  </md-button>
</div>

计算你的旗帜：

var self = this;
this.computeFlags = function(items) {
    self.flags = self.flags || {};
    self.flags.wish = [];
    for (var i=0; i<items.length; i++) {
         self.flags.wish.push(
             self.hasWished(items[i]);
         );
    };
};

切换你的旗帜：

this.toggleWishFlag = function(index) {
    var item = items(index);
    if (!self.flags.wish[index]) {
      self.flags.wish[index] = true;
      // send PUT request to API
      ToastService.show(item.title + ' added to Wish List');
    } else {
      self.flags.wish[index] = false;
      // send DELETE request to API
      ToastService.show(item.product + ' removed from Wish List');
    }
  };

请注意我在HTML中使用$index特殊属性。 有关详细信息，请参阅AngularJS ngRepeat API文档 。