ng-if indexOf with JSON Arrays

ng-if indexOf with JSON Arrays

本文关键字：Arrays JSON with indexOf ng-if      更新时间：2023-09-26

我有一个items的JSON输出-要显示单个项目，我使用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-repeat="item in items"中使用ng-if来检查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方法是什么

更新：

视图：（ctrl.hasWished将图标从true时的"收藏夹"更改为false时的"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');
    }
  }

当我点击按钮（如果之前为false）时，它会发送PUT请求，我还会收到ToastService消息"added.."，如果我再次点击，它会发出DELETE请求和ToastService信息"removed.."。但图标不会从"收藏夹"变为"收藏夹_订单"。当我重新加载页面时，会显示右侧的图标。

我在控制台中也有这样的错误消息：

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)

过滤器应该工作：

<div ng-repeat="item in items">
  <h3>{{item.title}}</h3>
  <a href="" ng-click="addToWishlist(item)" ng-if="!(item.wishlists|filter:{user_id:user.id}).length">Wish</a>
  <a href="" ng-click="removeFromWishlist(item)" ng-if="(item.wishlists|filter:{user_id:user.id}).length">Undo-Wish</a>
</div>

您不能对此任务使用indexOf函数。相反，我建议您在控制器内的作用域上创建一个函数，该函数检查愿望列表是否以这种方式包含用户-

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.user_id === user.id时才返回true。如果wishlist是int的列表，而不是对象的列表，则可以使用indexOf函数。

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

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

祝你好运。

不要使用indexOf，请查看以下帖子："还有最后一个方面需要考虑：相等。indexOf方法使用严格的相等（==）来确定元素是否与您的搜索匹配。这对字符串和数字等基元非常有效。但使用indexOf搜索给定的对象或数组可能会有困难。"利用的数组索引查找数组元素

您可以在ng/filter中使用$filter API Reference/ng/filter组件，或者，您应该在控制器中创建一个函数，将当前项和user.id作为参数传递，以执行此操作或创建自定义指令。如果您想了解自定义函数的想法，请选中此项：如何在javascript对象数组/中查找项的索引

问候

相关文章：