Filtro per più proprietà specifiche del modello in AngularJS (in relazione OR)

Dai un'occhiata all'esempio qui: http://docs.angularjs.org/api/ng.filter:filter

Puoi cercare in base a qualsiasi proprietà del telefono utilizzando <input ng-model="search">e puoi cercare solo in base al nome utilizzando <input ng-model="search.name">, ei risultati vengono opportunamente filtrati in base al nome (digitando un numero di telefono non viene restituito alcun risultato, come previsto).

Diciamo che ho un modello con una proprietà "nome", una proprietà "telefono", e una proprietà "segreto", come potrei fare per filtrare dal sia il "nome" e le proprietà "telefono" e non il "segreto" di proprietà ? Quindi, in sostanza, l'utente potrebbe digitare un nome o un numero di telefono e ng-repeatfiltrarebbe correttamente, ma anche se l'utente digitasse un valore che equivale a parte di un valore "segreto", non restituirebbe nulla.

Grazie.

Ecco il plunker

Nuovo plunker con codice più pulito e in cui sia la query che gli elementi dell'elenco di ricerca non fanno distinzione tra maiuscole e minuscole

L'idea principale è creare una funzione di filtro per raggiungere questo scopo.

Da doc. Ufficiale

funzione: una funzione predicato può essere utilizzata per scrivere filtri arbitrari. La funzione viene chiamata per ogni elemento dell'array. Il risultato finale è un array di quegli elementi per i quali il predicato ha restituito true.

<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;
};

Aggiornare

Alcune persone potrebbero avere dubbi sulle prestazioni nel mondo reale, il che è corretto.

Nel mondo reale, probabilmente faremmo questo tipo di filtro dal controller.

Ecco il post dettagliato che mostra come farlo.

in breve, aggiungiamo ng-changel'input per monitorare la nuova modifica della ricerca

e quindi attivare la funzione di filtro.

Puoi passare un oggetto come parametro all'espressione del filtro, come descritto nel riferimento API . Questo oggetto può applicare selettivamente le proprietà che ti interessano, in questo modo:

<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}">

Ecco un Plunker

Attenzione ... questo esempio funziona alla grande con AngularJS 1.1.5, ma non sempre anche nella 1.0.7. In questo esempio 1.0.7 verrà inizializzato con tutto filtrato, quindi funzionerà quando inizi a utilizzare gli input. Si comporta come se gli input abbiano valori non corrispondenti, anche se iniziano vuoti. Se vuoi rimanere su versioni stabili, vai avanti e provalo per la tua situazione, ma alcuni scenari potrebbero voler utilizzare la soluzione di @ maxisam fino al rilascio della 1.2.0.

Mi sono ispirato alla risposta di @maxisam e ho creato la mia funzione di ordinamento e avrei pensato di condividerlo (perché sono annoiato).

Situazione che voglio filtrare attraverso una serie di auto. Le proprietà selezionate da filtrare sono nome, anno, prezzo e km. Il prezzo della proprietà e i km sono numeri (da cui l'uso di .toString). Voglio anche controllare le lettere maiuscole (quindi .toLowerCase). Inoltre voglio essere in grado di suddividere la mia query di filtro in parole diverse (ad esempio, dato il filtro 2006 Acura, trova corrispondenze 2006 con l'anno e Acura con il nome).

Funzione passo a filtrare

        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;
    };

Se sei aperto a utilizzare librerie di terze parti, "Filtri angolari" con una bella raccolta di filtri potrebbero essere utili:

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

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

Spero che questa risposta possa aiutare, Filtro valore multiplo

E un esempio funzionante in questo violino

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

Ci sono un sacco di buone soluzioni qui, ma suggerirei di seguire l'altra strada con questo. Se la ricerca è la cosa più importante e la proprietà "secret" non è affatto utilizzata nella vista; il mio approccio per questo sarebbe quello di utilizzare il filtro angolare integrato con tutti i suoi vantaggi e mappare semplicemente il modello su una nuova serie di oggetti.

Esempio dalla domanda:

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

Ora, in html usa semplicemente il filtro normale per cercare entrambe queste proprietà.

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

Approccio piuttosto diretto usando filterBy in angularJs

Per lavorare plnkr segui questo link

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

Questo ha usato specialmente una singola proprietà per cercare su più colonne ma non tutte.

<!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>

controllore

// 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'
      }
      ];
  })

})();

L'ho risolto semplicemente:

<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

Ecco una ricerca con distinzione tra maiuscole e minuscole che separa anche la ricerca in parole da cercare anche in ciascun modello. Solo quando trova uno spazio proverà a dividere la query in un array e quindi a cercare ogni parola.

Restituisce vero se ogni parola è almeno in uno dei modelli.

$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);
    }
};

Il filtro può essere un oggetto JavaScript con campi e puoi avere un'espressione come:

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

Mi piace mantenere la semplicità quando possibile. Avevo bisogno di raggruppare per Internazionale, filtrare su tutte le colonne, visualizzare il conteggio per ogni gruppo e nascondere il gruppo se non esistevano elementi.

Inoltre non volevo aggiungere un filtro personalizzato solo per qualcosa di semplice come questo.

        <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>

Potrei essere molto in ritardo, ma questo è quello che ho finito per fare. Ho creato un filtro molto generale.

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;
        }

    })

Quindi usalo in questo modo

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

La tua casella di ricerca sarà come

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

dove name e device_id sono proprietà in dvs

Ecco una semplice soluzione per coloro che desiderano un filtro rapido contro un oggetto:

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

Il filtro array ti consente di imitare l'oggetto che stai cercando di filtrare. Nel caso precedente, le seguenti classi funzionerebbero perfettamente:

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

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

E dove potrebbe apparire il mazzo:

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

  return {
    Cards: _cards
  };
};

E se vuoi filtrare più proprietà dell'oggetto, separa semplicemente i nomi dei campi con una virgola:

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

EDIT: ecco un plnkr funzionante che fornisce un esempio di filtri di proprietà singoli e multipli:

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