2016-03-24 28 views
0

Yalnızca bir dizi kendi nesneleri arasında belirli bir değer içeriyorsa, bir html öğesini göstermenin bir yolunu bulamıyorum. Ben Yani eğer:filtrelenmiş dizi içeriyorsa ng-göster

people[ 
    { 
     id:1, name: 'frank', type: 'good' 
     ,id:2, name: 'john', type: 'bad' 
     ,id:3, name: 'mary', type: 'good' 
    } 
] 

Ben türleri için başlık çeşit göstermek istiyorum. türleri şunlardır Yani eğer: Yukarıdaki dizisi ile

"great" 
"good" 
"bad" 

için başlığı "büyük" görünür olmamalıdır.

Hem ngif hem de ngshow ile denedim. Problem sözdizimi ile ilgili gibi görünüyor. denedim sonuncusu:

(people|filter:(type:'great')) 

Ama konsolda bir hata alıyorum.

Doğrudan html'de düzeltmek veya bu tür bir işlem için denetleyiciye güvenmem mümkün mü?

+1

Neden 'ng-show' ifadesinde kullanılmıyor? Örnek: 'people.type! = 'Great'' – kazupooot

+1

http://plnkr.co/edit/xQBqLLhSDT2dhPrhVSWS?p=preview – kazupooot

+1

Sorunun Angular filtrelerini, Kazupooot'u nasıl kullanacağını değil, nasıl kullanılacağını düşünüyorum. Filtrelenmiş bir dizinin sonuçlarına göre karar vermek. OP, açıklayabilir misin? –

cevap

1

İlk olarak, örnek "dizi" kötü oluşturulur, ben tahmin ediyorum sen demekti:

people = [ 
    { id:1, name: 'frank', type: 'good' }, 
    { id:2, name: 'john', type: 'bad' }, 
    { id:3, name: 'mary', type: 'good' } 
]; 

İkinci olarak, soruları biraz kafa karıştırıcı, ama altındaki her kişiyi göstermek istiyorum farz ediyorum türlerine karşılık gelen bir başlık ve hiçbir kişiyle birlikte başlıklarını gizleme. Bu deneyin:

<div ng-if="$filter('filter')(people,{type:'great'}).length > 0"> 
    <h1>Great</h1> 
    <p ng-repeat="person in people | filter:{type:'great'}">{{person.name}}</p> 
</div> 
<div ng-if="$filter('filter')(people,{type:'good'}).length > 0"> 
    <h1>Good</h1> 
    <p ng-repeat="person in people | filter:{type:'good'}">{{person.name}}</p> 
</div> 

Sen gibi ikinci dizi oluşturarak bu iyileştirebilir:

types = [ 
    { id: 'great', header: 'Great' }, 
    { id: 'good', header: 'Good' }, 
    { id: 'bad', header: 'Bad' } 
]; 

Ve sonra sadece yuva senin tekrarlar:

<div ng-repeat="type in types" ng-if="$filter('filter')(people,{type:type.id}).length > 0"> 
    <h1>{{type.header}}</h1> 
    <p ng-repeat="person in people | filter:{type:type.id}">{{person.name}}</p> 
</div> 
  • Not I have not olduğunu Bu kodu test ettim, sadece baktım. Muhtemelen hatalar içerir, ancak yöntem çalışmalıdır.
  • Sen kumandanın bir bağımlılık olarak $ filtresi eklemek gerekir ve bunun

TL enjekte edecek/DR geçerli: $ filtresi servis JS ifadelerde Açısal filtreleri kullanmak için izin verir. 'Filtre' filtresi bir dizi döndürür, böylece kişilerinizi filtreleyin ve uzunluğunu kontrol edin.

İlgili konular