Question

在ng-repeat="item in items"内我有一个愿望清单布尔按钮，可以是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

获取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 Docs。

Answer 2

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

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

2 个答案: