ng-eğer JSON Array'ları olan indexOf

Question

items JSON Çıkışım var - Tek bir öğeyi görüntülemek için ng-repeat="item in items" kullanın. Ve şu anda oturum açmış olan kullanıcı nesnesine user

ile erişebiliyorum. Her öğe birden fazla kullanıcı istek listesine ait olabilir. i user.id yaptığınızda

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

i akımı kimliğini almak: Bir kullanıcı kendi istek bir öğe eklerse user_iditem.wishlists

içinde kaydedilmesini tek item JSON Çıktı böyle basitleştirilmiş şöyle görünür kullanıcı giriş yapmış.

Şimdi, current_user öğesinin bu öğeyi istek listesine ekleyip eklemediğini kontrol etmek ve bu kullanıcıya "istek listesine ekle" düğmesi yerine "istek listesinden çıkar" düğmesini görüntülemek için numaralı ng-if numaralı telefonu kullanmak istiyorum.

Benim çalışmıyor yaklaşımdır:

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

böyle indexOf kullanabilir miyim? Veya user.id öğesinin item.wishlists user_id içinde olup olmadığını kontrol etmek için doğru angularJS yolu ne olurdu?

Update:

Görünüm: (ctrl.hasWished simgeyi değiştirir 'favori' 'favorite_border' sahte eğer doğruysa)

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

Denetleyici:

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

Düğmeyi daha önce yanlış yazıyorsa, PUT isteğini gönderir ve ayrıca ToastSer'i alırım vice "ekledi" mesajı, tekrar tıklarsam DELETE isteği ve ".. kaldırıldı" ToastService mesajı gönderir. Ancak Simge, "favori" ten "favorite_border" a dönüşmez. Sayfayı yeniden yüklediğimde doğru Simgeler görüntülenir.

Ben de konsolun içinde bu hata mesajını vardır:

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) 

ve ayrıca bu hatayı tıklandığında:

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

Filtre gerektiği çalışır:

<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

Bu yayını kontrol indexOf kullanmayın

: "biri var Dikkate alınması gereken son nokta: Eşitlik: IndexOf yöntemi, bir öğenin aramanızla eşleşip eşleşmediğini belirlemek için katı eşitlik (===) kullanır.Bu, dizeler ve sayılar gibi temel öğeler için harikadır, ancak belirli bir nesneyi aramak için indexOf'u kullanmakta zorluk çekebilirsiniz. veya dizi " finding-array-elements-with-array-indexof

$ API Reference/ng/filter components in ng/filter numaralı filtreyi kullanabilirsiniz, ya da denetleyicinizde geçerli öğenin paremetreler olarak iletilmesini sağlayan bir işlev ve bunu yapmak için user.id veya özel bir yönerge oluşturmanız gerekir.Eğer özel işlev için bir fikir istiyorsanız bu kontrol edin: how-to-find-index-of-an-item-in-javascript-object-array/

Saygılar

Answer 3

Eğer bu görev için indexOf işlevini kullanamazsınız.

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

görünümü - -

<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 fonksiyonu yineleme olacak listesine bu şekilde kullanıcı içeriyorsa bunun yerine kontrol denetleyicideki kapsamında bir işlevi oluşturmak için salık İstek listesindeki her kullanıcı üzerinde ve yalnızca bunu geçen en az bir dilek listesi bulabilirse true değerini döndürür - wishlist.user_id === user.id. İstek listesi, int'nin yerine nesne listesi listesiyse indexOf işlevini kullanmış olabilirsiniz.

MDN js dizisi işlevleri belgelerine göz atmanızı öneririm, js ile kutudan çıkan tüm serin dizi işlevleri hakkında açıklama bulabilirsiniz.

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

iyi şanslar.