AngularJS ile bir diziyi nasıl filtreleyebilirim ve filtrelenmiş nesnenin bir özelliğini ng modeli niteliği olarak nasıl kullanabilirim?

122

Bir dizi nesnem varsa ve Açısal modeli bir filtreye dayalı öğelerden birinin özelliğine bağlamak istersem, bunu nasıl yaparım? Somut bir örnekle daha iyi açıklayabilirim:

HTML:

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
    </head>
    <body ng-controller="MyCtrl">
        <input ng-model="results.year">
        <input ng-model="results.subjects.title | filter:{grade:'C'}">
    </body>
</html>

Denetleyici:

function MyCtrl($scope) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
}

JSBin: http://jsbin.com/adisax/1/edit

İkinci girdiyi konuya 'C' notu ile filtrelemek istiyorum, ancak modeli dereceye bağlamak istemiyorum ; Bunu 'C' notu olan konunun başlığına bağlamak istiyorum .

Bu mümkün mü ve eğer öyleyse, nasıl yapılır?

angularjs

— Bernhard Hofmann
kaynak

127

<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
    <input ng-model="subject.title" />
</div>

— JB Nizet
kaynak

1

Bununla nereye gittiğinizi anlıyorum, ama gerçekten bir tekrarlayıcı istemedim. Aslında filtre uygulayacağım özellik bir kimlik sütunu, dolayısıyla benzersiz. Ancak genel problemi çözmenin doğru yolu olduğunu görüyorum.

— Bernhard Hofmann

1

bu italyanlar

— Silvio Troia

10

bu çok yardımcı oldu ve tersi için (C dışındaki her şey) bu işe filter:{grade:'!'+'C'}

— yarardı

2

A ile aynısını yapabilir misin grade array? Benim durumumda, sınıf dizimi bir ağaç görünümünden oluşturuyorum ve dizideki sonuçlara filtre uygulamak istiyorum.

— Juan Carlos Oropeza

157

Tüm "C" notlarını almak için kontrol cihazınızdaki "filtre" filtresini kullanabilirsiniz. Sonuç dizisinin ilk öğesini elde etmek size "C" derecesine sahip konunun başlığını verecektir .

$scope.gradeC = $filter('filter')($scope.results.subjects, {grade: 'C'})[0];

http://jsbin.com/ewitun/1/edit

Düz ES6 ile aynı:

$scope.gradeC = $scope.results.subjects.filter((subject) => subject.grade === 'C')[0]

— Oliver
kaynak

Üzgünüm ikinci filtreyi ('filtre') takip etmiyorum, bunu biraz daha açıklayabilir misiniz?

— Winnemucca

1

@stevek Filtrenin adı budur. Filter () yöntemi size filtreyi verir. Sadece filtreye filtre deniyor çünkü bir diziyi filtreliyor. Para birimi filtresiyle şöyle görünecektir: $ filter ['currency') (amount, symbol, fractionSize) Dokümanları buradan kontrol edin: docs.angularjs.org/api/ng/filter

— Oliver

61

İşte çalışan bir örneğe sahip değiştirilmiş bir JSBin:

http://jsbin.com/sezamuja/1/edit

İşte girdideki filtrelerle yaptığım şey:

<input ng-model="(results.subjects | filter:{grade:'C'})[0].title">

— lukeatdesignworks
kaynak

1

Bu gerçek anlaşma. Güç budur. Yol budur. Bununla gittim ve şimdi mutluyum.

— user1576978

13

lütfen unutmayın, eğer böyle bir $ filtresi kullanıyorsanız:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

ve başka bir not aldınız, Oh, bilmiyorum, CC veya AC veya C + veya CCC onları içine çekiyor. tam eşleşme için bir gereksinim eklemeniz gerekir:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'}, true);

Bunun gibi bazı komisyon detaylarını çekerken bu beni gerçekten öldürdü:

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}))[0];

sadece hata için çağrılır çünkü 6 yerine 56 komisyon numarasını çekiyordu.

Gerçek kuvvetleri tam olarak eşleştirmek.

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}, true))[0];

Yine de bunu tercih ederim (typcript kullanıyorum, dolayısıyla "Let" ve =>):

let obj = this.$filter('filter')(this.CommissionTypes, (item) =>{ 
             return item.commission_type_id === 6;
           })[0];

Bunu yapıyorum çünkü, yolun aşağısında bir noktada, bu filtrelenmiş verilerden daha fazla bilgi almak isteyebilirim, vb ... tam orada fonksiyona sahip olmak kaputu açık bırakır.

— Daniel Morris
kaynak

Senin gibi aynı hatayı aldım, üçüncü boole parametresiyle ilgili ipucu için teşekkürler. Farkında değildim.

— Georg Leber

12

Kontrolörde ayrı bir sonuç listesi oluşturmak isterseniz bir filtre uygulayabilirsiniz

function MyCtrl($scope, filterFilter) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
  //create a filtered array of results 
  //with grade 'C' or subjects that have been failed
  $scope.failedSubjects = filterFilter($scope.results.subjects, {'grade':'C'});
}

Ardından , sonuç nesnesine başvurduğunuz gibi, başarısız konulara da başvurabilirsiniz .

buradan daha fazla bilgi edinebilirsiniz https://docs.angularjs.org/guide/filter

bu cevap açısal dokümantasyonu güncellediğinden, şimdi filtreyi çağırmayı öneriyorlar

// update 
// eg: $filter('filter')(array, expression, comparator, anyPropertyKey);
// becomes
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

— Kieran
kaynak

filterFilter nedir? herhangi bir hizmet mi yoksa direktif mi? filterFilter kodu nerede?

— Mou

açısal bir hizmettir. Yukarıdaki bağlantıdaki ilk örneğe bir göz atın. (scripts.js dosyasında)

— Kieran

onlar dokümantasyon filterFilter değişmiş olsa da hala .. çalışır

— Kieran

4

Sen edebilirsiniz da kullanmak fonksiyonları ile $filter('filter'):

var foo = $filter('filter')($scope.results.subjects, function (item) {
  return item.grade !== 'A';
});

— Nelu
kaynak

4

ES6 kullanıyorsanız şunları yapabilirsiniz:

var sample = [1, 2, 3]

var result = sample.filter(elem => elem !== 2)

/* output */
[1, 3]

Ayrıca, filtre mevcut diziyi güncellemez, her seferinde yeni bir filtrelenmiş dizi döndürür.

— Diego Venâncio
kaynak

0

Aynı filtreyi birden çok sütunla HTML'de uygulamak, örneğin:

 variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)

— Amay Kulkarni
kaynak