Question

我的JSON输出为items - 要显示我使用ng-repeat="item in items"的单个项目。我可以使用user

访问当前登录的用户对象

每个项目都可以属于多个用户的愿望清单。如果用户将商品添加到其愿望清单，user_id将保存在item.wishlists

中

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

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

当我user.id时，我获得当前登录用户的ID。

现在我想在ng-if中使用ng-repeat="item in items"检查current_user是否已将此项添加到他的愿望清单，然后向该用户显示“从愿望清单中删除”按钮而不是“加入心愿单“。

我的工作方法是：

<div ng-repeat="item in items">
  <h3>{{item.title}}</h3>
  <a href="" ng-click="addToWishlist(item)" ng-if="item.wishlists.indexOf(user.id) == -1">Wish</a>
  <a href="" ng-click="removeFromWishlist(item)" ng-if="item.wishlists.indexOf(user.id) > -1">Undo-Wish</a>
</div>

我可以像这样使用indexOf吗？或者，检查user.id是否在item.wishlists user_id中的正确angularJS方法是什么？

更新

查看（如果为true，则ctrl.hasWished将图标从'favorite'更改为'favorite_border'

<div ng-repeat="item in items">
      <md-button class="md-icon-button feed-wish md-warn" aria-label="Wish" ng-click="ctrl.toggleWish(item)">
        <i class="material-icons">favorite{{ctrl.hasWished(item) ? '' : '_border' }}</i>
      </md-button> 
</div>

控制器：

  // Check if User has wished this item already: Should return true or 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
    });
  };

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

当我点击按钮时，如果它之前是假的，它会发送PUT请求，我也会收到ToastService消息“添加..”，如果我再次点击它会发送DELETE请求和ToastService消息“已删除.. ”。但Icon并没有从“最爱”变为“favorite_border”。当我重新加载页面时，会显示正确的图标。

我在控制台中也有此错误消息：

TypeError: Cannot read property 'id' of null
    at http://ruby-on-rails-140223.nitrousapp.com:3000/assets/auctions/auctionCtrl-f2cb59b8ad51e03a2264ef2c6e759a54.js?body=1:33:52
    at Array.some (native)
    at hasWished (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/auctions/auctionCtrl-f2cb59b8ad51e03a2264ef2c6e759a54.js?body=1:32:30)
    at fn (eval at <anonymous> (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:13323:15), <anonymous>:4:318)
    at Object.expressionInputWatch [as get] (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:14303:31)
    at Scope.$digest (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:15819:40)
    at Scope.$apply (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:16098:24)
    at done (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:10547:47)
    at completeRequest (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:10745:7)
    at XMLHttpRequest.requestLoaded (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:10686:9)

并点击此错误时：

TypeError: v2.hasWished is not a function
    at fn (eval at <anonymous> (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:13323:15), <anonymous>:4:318)
    at Object.expressionInputWatch [as get] (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:14303:31)
    at Scope.$digest (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:15819:40)
    at Scope.$apply (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:16098:24)
    at HTMLButtonElement.<anonymous> (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular-touch/angular-touch-b4d02ed602708a1c93b51087222e0363.js?body=1:478:13)
    at HTMLButtonElement.eventHandler (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:3299:21)

Answer 1

过滤器应该有效：

Answer 2

您无法使用indexOf函数执行此任务。相反，我建议你在控制器内的范围上创建一个函数，检查wishlist是否以这种方式包含用户 -

function isUserOnWishlist(item) {
    return item.wishlists.some(function(wishlist) {
        return wishlist.user_id === user.id; // ( on $scope ? )
    });
}

视图上的

-

<a href="" ng-click="addToWishlist(item)" ng-if="!isUserOnWishlist(item.wishlists)">Wish</a>
<a href="" ng-click="addToWishlist(item)" ng-if="isUserOnWishlist(item.wishlists)">Undo-Wish</a>

isUserOnWishlist函数将迭代wishlist上的每个用户，并且仅当它找到至少一个传递此愿望列表的愿望列表时才返回true - wishlist.user_id === user.id。如果wishlist是int的列表而不是对象列表，你可以使用indexOf函数。

我建议你查看MDN js数组函数文档，你可以找到关于js开箱即用的所有酷数组函数的解释。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

祝你好运。

Answer 3

不要使用indexOf，请查看此帖子：＆＃34;最后一个方面需要考虑：平等。 indexOf方法使用严格相等（===）来确定元素是否与您的搜索匹配。这适用于字符串和数字等基元。但是您可能难以使用indexOf来搜索给定的对象或数组＆＃34; finding-array-elements-with-array-indexof

您可以使用$ filter API Reference / ng / filter components in ng / filter，或者，您可以在控制器中创建一个函数，作为当前项的参数传递，user.id执行此操作或创建自定义指令。如果您想了解自定义功能，请选中此项：how-to-find-index-of-an-item-in-javascript-object-array/

此致

ng-if indexOf with JSON Arrays

3 个答案: