AngularJS: Özel filtreler ve yinelenen

Question

Ben AngularJS newbie ve bazı JSON çeker ve bu veri bir bit ile bu veri çeşitli bitleri render küçük bir kanıt-of-konsept otomobil kiralama listeleri uygulaması inşa ediyorum -repeat, filtrelerin bir çift ile:

<article data-ng-repeat="result in results | filter:search" class="result"> 
     <header><h3>{{result.carType.name}}, {{result.carDetails.doors}} door, &pound;{{result.price.value}} - {{ result.company.name }}</h3></header> 
      <ul class="result-features"> 
       <li>{{result.carDetails.hireDuration}} day hire</li> 
       <li data-ng-show="result.carDetails.airCon">Air conditioning</li> 
       <li data-ng-show="result.carDetails.unlimitedMileage">Unlimited Mileage</li> 
       <li data-ng-show="result.carDetails.theftProtection">Theft Protection</li> 
      </ul> 
    </article> 

    <h2>Filters</h2> 

    <h4>Doors:</h4> 
    <select data-ng-model="search.carDetails"> 
     <option value="">All</option> 
     <option value="2">2</option> 
     <option value="4">4</option> 
     <option value="9">9</option> 
    </select> 

    <h4>Provider:</h4> 
    Atlas Choice <input type="checkbox" data-ng-model="search.company" ng-true-value="Atlas Choice" ng-false-value="" value="Atlas Choice" /><br> 
    Holiday Autos <input type="checkbox" data-ng-model="search.company" ng-true-value="Holiday Autos" ng-false-value="" value="Holiday Autos" /><br> 
    Avis <input type="checkbox" data-ng-model="search.company" ng-true-value="Avis" ng-false-value="" value="Avis" /><br>  

Şimdi benim denetleyicisi özel bir filtre oluşturmak istiyorum, benim ng-tekrarı öğeler üzerinde yineleme ve yalnızca belirli ölçütleri karşılayan öğeleri iade edebilirsiniz - için Örneğin, hangi 'sağlayıcı' onay kutularının işaretlendiğine dayalı bir değerler dizisi oluşturabilirim, sonra her ng-yinelemeli öğeyi buna göre değerlendirebilirim. Bunu nasıl yapacağımı anlayamıyorum, ama sözdizimi açısından - herkes yardımcı olabilir mi? Bu tüm arama olduğunu $ kullanmaktır düzeltmek için en kolay yollardan http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

Answer 1

olduğunu arama sonuçlarında.

JS: Sonra, örneğin search nesneyle sizin gibi filter talimat geçmek

$scope.filterFn = function(car) 
{ 
    // Do some tests 

    if(car.carDetails.doors > 2) 
    { 
     return true; // this will be listed in the results 
    } 

    return false; // otherwise it won't be within the results 
}; 

HTML:

... 
<article data-ng-repeat="result in results | filter:search | filter:filterFn" class="result"> 
... 

size görebileceğiniz gibi birçok filtreyi birlikte zincirleyebilir, bu nedenle özel filtre işlevinizi eklemek, önceki filtreyi search objec kullanarak kaldırmaya zorlamaz t (birlikte sorunsuz bir şekilde çalışacaklardır).

Answer 2

Bir:

İşte benim Plunker bu.

Çalıştığını gösteren bir plunker. (Onların tamamlayıcı olmalıdır düşündüm çünkü) Ben radyoya onay kutularını değişti ..

http://plnkr.co/edit/dHzvm6hR5P8G4wPuTxoi?p=preview

Eğer fonksiyonları ile çalışmak gerek bunu (yerine genel bir arama yaparak) çok spesifik bir şekilde istiyorsanız aramada Eğer bir argüman olarak dizi elemanını alır ve olması gerekmediğini dayalı true veya false döndüren bir işlev oluşturmanın bazı özel filtre mantığı çalıştırmak istiyorsanız

belgeler burada

http://docs.angularjs.org/api/ng.filter:filter

Answer 3

hala filtreye arama modelinde geçebilir özel bir filtre istiyorsanız: cartypefilter için tanım şöyle olabilir

<article data-ng-repeat="result in results | cartypefilter:search" class="result"> 

:

app.filter('cartypefilter', function() { 
    return function(items, search) { 
    if (!search) { 
     return items; 
    } 

    var carType = search.carType; 
    if (!carType || '' === carType) { 
     return items; 
    } 

    return items.filter(function(element, index, array) { 
     return element.carType.name === search.carType; 
    }); 

    }; 
}); 

http://plnkr.co/edit/kBcUIayO8tQsTTjTA2vO?p=preview

Answer 4

Aynı ng-tekrar filtresine 1 fonksiyon filtresinden daha fazlasını çağırabilirsiniz

<article data-ng-repeat="result in results | filter:search() | filter:filterFn()" class="result">