帶有JSON數組的ng-if indexOf

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這樣嗎？或者什麼是正確的angularJS方法來檢查user.id是否在item.wishlists user_id的內？

Update:

查看：（ctrl.hasWished改變從圖標 '收藏' 如果真要 '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請求，我也會得到ToastSer副消息「添加..」，如果我再次點擊它發送DELETE請求和ToastService消息「刪除..」。但圖標不會從「最喜歡的」改變爲「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

過濾器應工作：

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

Answer 2

不要使用的indexOf，檢查這個帖子： 「有一個最後一個要考慮的方面是：平等：indexOf方法使用嚴格的等式（===）來確定一個元素是否與你的搜索匹配，這對字符串和數字等原語很有用，但是你可能難以使用indexOf來搜索給定的對象或陣列「 finding-array-elements-with-array-indexof

您可以使用$過濾 API Reference/ng/filter components in ng/filter，也許，你應該建立在你的控制器通過一個paremeters當前項目和user.id做這個或創建一個自定義指令的功能。如果你想要一個想法爲您的自定義功能檢查：how-to-find-index-of-an-item-in-javascript-object-array/

問候

Answer 3

你不能使用的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功能將迭代對願望清單中的每個用戶進行檢查，並且只有當它能夠找到至少一個通過此願望清單的願望清單時才返回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

好運。