The WishList Boolean button toggles all items in ng-repeat instead of a single item

Question

Inside ng-repeat="item in items"I have a wishlist logical button, which can be trueor 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>

using the function hasWished(item), I check if the current user ID ( Auth._currentUser.id) is within the user IDs stored in the item’s wish list.

The JSON output of one itemlooks simplified as follows:

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

Therefore, the function hasWished(item)should return trueeither 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
    });
  };

It still works. Using the function, toggleWishI want to switch hasWished(item)from true to false or vice versa:

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

$index HTML. . 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' }}