AngularJS'de (OR ilişkisinde) Birden Çok Belirli Model Özelliğine Göre Filtreleme

Buradaki örneğe bir göz atın: http://docs.angularjs.org/api/ng.filter:filter

Kullanarak telefon özelliklerinden herhangi birine göre <input ng-model="search">arama yapabilir ve kullanarak sadece isme göre arama yapabilirsiniz <input ng-model="search.name">ve sonuçlar ada göre uygun şekilde filtrelenir (bir telefon numarası yazmak, beklendiği gibi herhangi bir sonuç döndürmez).

Diyelim ben, nasıl tarafından filtre uygulamayla ilgili gider bir "isim" mülkü bir "telefon" mülkü ve "gizli" bir özelliğe sahip bir modeli olduğunu varsayalım hem "telefon" özellikleri ve "isim" ve değil "gizli" özelliği ? Dolayısıyla, özünde, kullanıcı bir ad veya telefon numarası yazabilir ve ng-repeatdoğru bir şekilde filtreleyebilir, ancak kullanıcı "gizli" bir değerin bir kısmına eşit bir değer yazsa bile, hiçbir şey döndürmez.

Teşekkürler.

İşte dalgıç

Daha temiz kodlu ve hem sorgu hem de arama listesi öğelerinin büyük / küçük harfe duyarlı olmadığı yeni planlayıcı

Ana fikir, bu amaca ulaşmak için bir filtre işlevi oluşturmaktır.

Gönderen resmi doc

işlev: Bir yüklem işlevi rastgele süzgeçler yazmak için kullanılabilir. İşlev, dizinin her bir öğesi için çağrılır. Nihai sonuç, yüklemin true döndürdüğü bu öğeler dizisidir.

<input ng-model="query">

<tr ng-repeat="smartphone in smartphones | filter: search "> 

$scope.search = function(item) {
    if (!$scope.query || (item.brand.toLowerCase().indexOf($scope.query) != -1) || (item.model.toLowerCase().indexOf($scope.query.toLowerCase()) != -1) ){
        return true;
    }
    return false;
};

Güncelleme

Bazı insanların gerçek dünyadaki performansla ilgili endişeleri olabilir, bu doğru.

Gerçek dünyada, muhtemelen bu tür bir filtreyi denetleyiciden yapardık.

İşte nasıl yapılacağını gösteren ayrıntılı gönderi .

kısaca, ng-changeyeni arama değişikliğini izlemek için girdiye ekliyoruz

ve ardından filtre işlevini tetikleyin.

API Başvurusu bölümünde açıklandığı gibi, filtre ifadenize parametre olarak bir Nesne iletebilirsiniz . Bu nesne, ilgilendiğiniz özellikleri seçerek uygulayabilir, örneğin:

<input ng-model="search.name">
<input ng-model="search.phone">
<input ng-model="search.secret">
<tr ng-repeat="user in users | filter:{name: search.name, phone: search.phone}">

İşte bir Plunker

Dikkat ... Bu örnek AngularJS 1.1.5 ile harika çalışıyor, ancak 1.0.7'de her zaman iyi değil. Bu örnekte 1.0.7, filtrelenen her şeyle başlatılacak, ardından girişleri kullanmaya başladığınızda çalışacaktır. Boş başlasalar bile, girdilerin içinde eşleşmeyen değerler varmış gibi davranır. Kararlı sürümlerde kalmak istiyorsanız, devam edin ve durumunuz için bunu deneyin, ancak bazı senaryolar @ maxisam'ın çözümünü 1.2.0 yayımlanana kadar kullanmak isteyebilir.

@ Maxisam'ın cevabından kendime ilham verdim ve kendi sıralama işlevimi yarattım ve paylaşmayı düşündüm (çünkü sıkıldım).

Durum Bir dizi arabayı filtrelemek istiyorum. Filtrelenecek seçili özellikler ad, yıl, fiyat ve km'dir. Emlak fiyatı ve km sayıdır (dolayısıyla kullanımı .toString). Ayrıca büyük harfleri de kontrol etmek istiyorum (dolayısıyla .toLowerCase). Ayrıca, filtre sorgumu farklı kelimelere bölebilmek istiyorum (örneğin, 2006 Acura filtresi verildiğinde, 2006 yılla ve Acura adıyla eşleşiyor).

Filtreye geçtiğim işlev

        var attrs = [car.name.toLowerCase(), car.year, car.price.toString(), car.km.toString()],
            filters = $scope.tableOpts.filter.toLowerCase().split(' '),
            isStringInArray = function (string, array){
                for (var j=0;j<array.length;j++){
                    if (array[j].indexOf(string)!==-1){return true;}
                }
                return false;
            };

        for (var i=0;i<filters.length;i++){
            if (!isStringInArray(filters[i], attrs)){return false;}
        }
        return true;
    };

Üçüncü taraf kitaplıklarını kullanmaya açıksanız, güzel bir filtre koleksiyonuna sahip 'Açısal Filtreler' yararlı olabilir:

https://github.com/a8m/angular-filter#filterby

collection | filterBy: [prop, nested.prop, etc..]: search

Bu cevabın yardımcı olacağını umuyoruz, Çoklu Değer Filtresi

Ve bu kemanla çalışan örnek

arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]}

Burada bir sürü iyi çözüm var ama bununla diğer rotaya gitmenizi öneririm. Arama en önemli şeyse ve 'gizli' özellik görünümde hiç kullanılmıyorsa; buna yönelik yaklaşımım, tüm faydalarıyla birlikte yerleşik açısal filtreyi kullanmak ve modeli yeni bir nesne dizisine eşlemek olacaktır.

Sorudan örnek:

$scope.people = members.map(function(member) { 
                              return { 
                                name: member.name, 
                                phone: member.phone
                              }});

Şimdi, html'de bu iki özelliği de aramak için normal filtreyi kullanın.

<div ng-repeat="member in people | filter: searchString">

FilterBy in angularJs kullanarak oldukça basit yaklaşım

Plnkr çalışmak için bu bağlantıyı izleyin

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

Bu, özellikle birden çok sütunda arama yapmak için tek bir özelliği kullandı ancak hepsini değil.

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script data-require="angular-filter@0.5.2" data-semver="0.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.2/angular-filter.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl as vm">
  <input type="text" placeholder="enter your search text" ng-model="vm.searchText" />
   <table>
     <tr ng-repeat="row in vm.tableData | filterBy: ['col1','col2']: vm.searchText">
       <td>{{row.col1}}</td>
       <td>{{row.col2}}</td>
       <td>{{row.col3}}</td>
     </tr>
   </table>
   <p>This will show filter from <b>two columns</b> only(col1 and col2) . Not from all. Whatever columns you add into filter array they
   will be searched. all columns will be used by default if you use <b>filter: vm.searchText</b></p>
  </body>
</html>

kontrolör

// Code goes here
(function(){

  var myApp = angular.module('myApp',['angular.filter']);

  myApp.controller('myCtrl', function($scope){
    var vm= this;
    vm.x = 20;

    vm.tableData = [
      {
        col1: 'Ashok',
        col2: 'Tewatia',
        col3: '12'
      },{
        col1: 'Babita',
        col2: 'Malik',
        col3: '34'
      },{
        col1: 'Dinesh',
        col2: 'Tewatia',
        col3: '56'
      },{
        col1: 'Sabita',
        col2: 'Malik',
        col3: '78'
      }
      ];
  })

})();

Bunu basitçe çözdüm:

<div ng-repeat="Object in List | filter: (FilterObj.FilterProperty1 ? {'ObjectProperty1': FilterObj.FilterProperty1} : '') | filter:(FilterObj.FilterProperty2 ? {'ObjectProperty2': FilterObj.FilterProperty2} : '')">

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

Burada, aramanızı her modelde de aramak için kelimelere ayıran büyük / küçük harfe duyarlı bir arama. Yalnızca bir boşluk bulduğunda sorguyu bir diziye bölmeye ve ardından her kelimeyi aramaya çalışır.

Her kelime modellerden en az birinde yer alıyorsa doğru döndürür.

$scope.songSearch = function (row) {
    var query = angular.lowercase($scope.query);
    if (query.indexOf(" ") > 0) {
        query_array = query.split(" ");
        search_result = false;
        for (x in query_array) {
            query = query_array[x];
            if (angular.lowercase(row.model1).indexOf(query || '') !== -1 || angular.lowercase(row.model2).indexOf(query || '') !== -1 || angular.lowercase(row.model3).indexOf(query || '') !== -1){
                search_result = true;
            } else {
                search_result = false;
                break;
            }
        }
        return search_result;
    } else {
        return (angular.lowercase(row.model1).indexOf(query || '') !== -1 || angular.lowercase(row.model2).indexOf(query || '') !== -1 || angular.lowercase(row.model3).indexOf(query || '') !== -1);
    }
};

Filtre, alanları olan bir JavaScript nesnesi olabilir ve aşağıdaki gibi ifadelere sahip olabilirsiniz:

ng-repeat= 'item in list | filter :{property:value}'

Mümkün olduğunda basit tutmayı seviyorum. Enternasyonal'e göre gruplandırmam, tüm sütunları filtrelemem, her grup için sayımı görüntülemem ve hiçbir öğe yoksa grubu gizlemem gerekiyordu.

Ayrıca, sadece böyle basit bir şey için özel bir filtre eklemek istemedim.

        <tbody>
            <tr ng-show="fusa.length > 0"><td colspan="8"><h3>USA ({{fusa.length}})</h3></td></tr>
            <tr ng-repeat="t in fusa = (usa = (vm.assignmentLookups | filter: {isInternational: false}) | filter: vm.searchResultText)">
                <td>{{$index + 1}}</td>
                <td ng-bind-html="vm.highlight(t.title, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.genericName, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.mechanismsOfAction, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.diseaseStateIndication, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.assignedTo, vm.searchResultText)"></td>
                <td ng-bind-html="t.lastPublished | date:'medium'"></td>
            </tr>
        </tbody>
        <tbody>
            <tr ng-show="fint.length > 0"><td colspan="8"><h3>International ({{fint.length}})</h3></td></tr>
            <tr ng-repeat="t in fint = (int = (vm.assignmentLookups | filter: {isInternational: true}) | filter: vm.searchResultText)">
                <td>{{$index + 1}}</td>
                <td ng-bind-html="vm.highlight(t.title, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.genericName, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.mechanismsOfAction, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.diseaseStateIndication, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.assignedTo, vm.searchResultText)"></td>
                <td ng-bind-html="t.lastPublished | date:'medium'"></td>
            </tr>
        </tbody>

Çok geç kalmış olabilirim ama sonunda bunu yapmaya başladım. Çok genel bir filtre yaptım.

angular.module('app.filters').filter('fieldFilter', function() {
        return function(input, clause, fields) {
            var out = [];
            if (clause && clause.query && clause.query.length > 0) {
                clause.query = String(clause.query).toLowerCase();
                angular.forEach(input, function(cp) {
                    for (var i = 0; i < fields.length; i++) {
                        var haystack = String(cp[fields[i]]).toLowerCase();
                        if (haystack.indexOf(clause.query) > -1) {
                            out.push(cp);
                            break;
                        }
                    }
                })
            } else {
                angular.forEach(input, function(cp) {
                    out.push(cp);
                })
            }
            return out;
        }

    })

Öyleyse böyle kullan

<tr ng-repeat-start="dvs in devices |  fieldFilter:search:['name','device_id']"></tr>

Arama kutunuz şöyle olacak

<input ng-model="search.query" class="form-control material-text-input" type="text">

Burada name ve device_id, dv'lerdeki özelliklerdir

İşte bir nesneye karşı hızlı bir filtre isteyenler için basit bir çözüm:

<select>
  <option ng-repeat="card in deck.Cards | filter: {Type: 'Face'}">{{card.Name}}</option>
</select>

Dizi filtresi, filtrelemeye çalıştığınız nesneyi taklit etmenizi sağlar. Yukarıdaki durumda, aşağıdaki sınıflar gayet iyi çalışacaktır:

var card = function(name, type) {
  var _name = name;
  var _type = type;

  return {
    Name: _name,
    Type: _type
  };
};

Ve deste nasıl görünebilir:

var deck = function() {
  var _cards = [new card('Jack', 'Face'),
                new card('7', 'Numeral')];

  return {
    Cards: _cards
  };
};

Ve nesnenin birden çok özelliğini filtrelemek istiyorsanız, alan adlarını virgülle ayırmanız yeterlidir:

<select>
  <option ng-repeat="card in deck.Cards | filter: {Type: 'Face', Name: 'Jack'}">{{card.Name}}</option>
</select>

DÜZENLEME: İşte tekli ve çoklu özellik filtrelerinin bir örneğini sağlayan çalışan bir plnkr:

http://embed.plnkr.co/i0wCx6l1WPYljk57SXzV/