açısal ng-tekrar, ifadeyle eşleşirse bir öğeyi atlar


91

Temel olarak, bir ifade ile eşleşiyorsa, bir ng-yinelemedeki bir öğeyi atlamayı basitçe açısal söylemenin bir yolunu arıyorum, temelde continue;

Denetleyicide:

$scope.players = [{
    name_key:'FirstPerson', first_name:'First', last_name:'Person'
}, {
    name_key:'SecondPerson', first_name:'Second', last_name:'Person'
}]

Şimdi şablonumda eşleşmeyen herkese göstermek istiyorum name_key='FirstPerson'. Filtreler olması gerektiğini düşündüm, bu yüzden onunla oynamak için bir Plunkr kurdum ama hiç şansım olmadı. Plunkr Girişimi


Anlamaya çalışıyorum: tüm öğeleri göstermek istiyor ama kimin eşleşip kimin eşleşmediğini mi belirtmek istiyorsunuz? yoksa sadece filtre mi?
Maxim Shoustin

Yanıtlar:


144

As @Maxim Shoustin önerdi en iyi yolu özel bir filtre kullanmak olacaktır istediğini elde etmek.
Ancak başka yollar da var, bunlardan biri ng-ifyönergeyi aynı öğede kullanmaktır, yönergeyi koyduğunuzda ng-repeat(ayrıca, burada plunker ):

<ul>
    <li ng-repeat="player in players" ng-if="player.name_key!='FirstPerson'"></li>
</ul>

Bu, estetik açıdan küçük bir dezavantaj sunabilir, ancak filtrelemenizin playersdiziye sıkı bir şekilde bağlı olmayan ve uygulamanızın kapsamındaki diğer verilere kolayca erişebilen bir kurala dayalı olabilmesi gibi büyük bir avantaja sahiptir :

  <li 
      ng-repeat="player in players" 
      ng-if="app.loggedIn && player.name != user.name"
  ></li>

Güncelleme
Belirtildiği gibi, bu bu tür bir sorun için çözümlerden biridir ve ihtiyaçlarınızı karşılayabilir veya karşılamayabilir.
Yorumlarda belirtildiği gibi ng-if, bir direktiftir, bu da aslında arka planda beklediğinizden daha fazla şey yapabileceği anlamına gelir.
Örneğin, ng-if üstünden yeni bir kapsam oluşturur :

NgIf içinde oluşturulan kapsam, prototip mirasını kullanarak üst kapsamından miras alır.

Bu genellikle normal davranışı etkilemez ancak beklenmedik durumları önlemek için uygulamadan önce bunu aklınızda bulundurmalısınız.


bu tam olarak aradığım şeydi, bunu özel filtre olmadan yapmanın kısa ve tatlı bir yolu olması gerektiğini biliyordu. Teşekkürler!
aron.duby

Not: ng'nin bazı kapsam davranışları vardır - eğer bu yanıltıcı olabilir. Bu yöntemi denedim ve başka yerlerde sorunlara neden oldu. Yani, tekrarlayıcı bittiğinde bir olayı yayınlayan bir "gözlemci" direktifim var. Ng-if'i bu tekrarlayıcıya ekledikten sonra artık bu olayı tetiklemedi. Özel bir filtre aslında en temiz yol olabilir.
claywhipkey

@claywhipkey haklısınız, en temiz yol filtre kullanmaktır, ancak bu tüm durumlar için uygun değildir. Her neyse, yorum için teşekkürler ve sadece verileri filtrelemek için bir direktif kullanmanın sonuçlarından haberdar etmek için cevaba bir uyarı güncellemesi eklediğimi görebilirsiniz .
gion_13

43

Bunun eski bir çözüm olduğunu biliyorum, ancak birinin başka bir olası çözüm araması durumunda, bunu çözmenin başka bir yolu da var - standart filtre işlevini kullanın :

Nesne: Dizinin içerdiği nesneler üzerindeki belirli özellikleri filtrelemek için bir desen nesnesi kullanılabilir. Örneğin, {ad: "M", telefon: "1"} koşul, "M" içeren özellik adına ve "1" içeren özellik telefonuna sahip bir öğe dizisi döndürür. ... Koşul, dizenin önüne! İle önek getirilerek olumsuzlanabilir. Örneğin, {ad: "! M"} yüklemi, "M" içermeyen özellik adına sahip bir öğe dizisi döndürür.

Dolayısıyla, TS örneği için bunun gibi bir şey yapmalıdır:

<ul>
    <li ng-repeat="player in players | filter: { name_key: '!FirstPerson' }"></li>
</ul>

Özel filtreler yazmaya gerek yok, ng-ifyeni kapsamıyla kullanmaya gerek yok .


Konuya göre basit. Yazarın belirttiği gibi hiçbir özel filtre veya yeni kapsam oluşturulmadı. Bir listedeki tek bir değeri atlamak için mükemmeldir.
mbokil

Sanırım 'player.name_key'den' player'ı çıkarmanız gerekiyor - bu yüzden yukarıdaki örnekte sadece "{name_key: '! FirstPerson'}" olacaktır.
smithml

Angular'ı asla boş anahtarlarla güzelce oynayamadım. Eşdeğeri için yerleşik filtreleri kullanmanın bir çeşit hile var mı player in players | filter: { name_key: '' }? Bu belirli yönerge yalnızca boş / boş olan oyuncularla eşleşmeyecektir name_key. name_key: '!'Boş olmayan herhangi bir oyuncuyu seçmeyi amaçlayan tersi name_keyde çalışmaz.
Eric L.

Bu cevabı kontrol edebilirsiniz .
Ilya Luzyanin

4
Bunun sadece dizilerle çalıştığına dikkat edin, böyle bir durumda nesne özellikleriyle değilng-repeat="(key, val) in player"
David Diez

19

Uyguladığınızda özel filtre kullanabilirsiniz ng-repeat. Gibi bir şey:

 data-ng-repeat="player in players |  myfilter:search.name

myfilter.js:

app.filter('myfilter', function() {


   return function( items, name) {
    var filtered = [];

    angular.forEach(items, function(item) {

      if(name == undefined || name == ''){
        filtered.push(item);
        }

      /* only if you want start With*/
      // else if(item.name_key.substring(0, name.length) !== name){
      //   filtered.push(item);
      // }

      /* if you want contains*/
      // else if(item.name_key.indexOf(name) < 0 ){
      //   filtered.push(item);
      // }

       /* if you want match full name*/
       else if(item.name_key !== name ){
        filtered.push(item);
      }
    });

    return filtered;
  };
});

Demo Plunker


Bu işe koyduğunuz çalışma için teşekkürler. Kesinlikle doğru ama kodda @ gion_13 yanıtının kolaylığıyla gittim, bu yüzden onu kabul edilen yanıt olarak işaretlemem gerektiğini düşündüm
aron.duby
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.