Filtrowanie według wielu specyficznych właściwości modelu w AngularJS (w relacji OR)

Spójrz na przykład tutaj: http://docs.angularjs.org/api/ng.filter:filter

Możesz wyszukiwać według dowolnych właściwości telefonu, używając <input ng-model="search">i możesz wyszukiwać tylko według nazwy, używając <input ng-model="search.name">, a wyniki są odpowiednio filtrowane według nazwy (wpisanie numeru telefonu nie zwraca żadnych wyników, zgodnie z oczekiwaniami).

Powiedzmy, że mam model z „name” właściwości, „telefon” własności, a „tajnego” własności, jak pójdę o filtrowaniu przez zarówno „Nazwa” i „Telefon” właściwości i nie z „tajne” i usługi ? W skrócie, użytkownik mógłby wpisać nazwę lub numer telefonu i ng-repeatfiltrowałby poprawnie, ale nawet jeśli użytkownik wpisałby wartość stanowiącą część „tajnej” wartości, nic nie zwróci.

Dzięki.

Oto plunker

Nowy plunker z czystszym kodem, w którym zarówno w zapytaniach, jak i elementach listy wyszukiwania nie jest rozróżniana wielkość liter

Główną ideą jest stworzenie funkcji filtrującej, aby osiągnąć ten cel.

Z oficjalnego doc

funkcja: funkcja predykatu może służyć do pisania dowolnych filtrów. Funkcja jest wywoływana dla każdego elementu tablicy. Końcowym wynikiem jest tablica tych elementów, dla których predykat zwrócił prawdę.

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

Aktualizacja

Niektórzy ludzie mogą mieć obawy dotyczące wydajności w świecie rzeczywistym, co jest poprawne.

W prawdziwym świecie prawdopodobnie zrobilibyśmy tego rodzaju filtr ze sterownika.

Oto post szczegółowy pokazujący, jak to zrobić.

w skrócie, dodajemy ng-changedane wejściowe do monitorowania nowych zmian wyszukiwania

a następnie uruchom funkcję filtru.

Obiekt można przekazać jako parametr do wyrażenia filtru, zgodnie z opisem w dokumentacji interfejsu API . Ten obiekt może selektywnie zastosować interesujące Cię właściwości, na przykład:

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

Oto Plunker

Uwaga ... ten przykład działa świetnie z AngularJS 1.1.5, ale nie zawsze tak dobrze w 1.0.7. W tym przykładzie 1.0.7 zainicjuje się z odfiltrowaniem wszystkiego, a następnie zacznie działać, gdy zaczniesz używać danych wejściowych. Zachowuje się tak, jakby dane wejściowe zawierały niedopasowane wartości, mimo że na początku są puste. Jeśli chcesz pozostać przy stabilnych wydaniach, wypróbuj to w swojej sytuacji, ale niektóre scenariusze mogą chcieć używać rozwiązania @ maxisam do czasu wydania 1.2.0.

Zainspirowałem się odpowiedzią @ maxisam i stworzyłem własną funkcję sortowania i myślałem, że się nią podzielę (bo się nudzę).

Sytuacja Chcę przefiltrować szereg samochodów. Wybrane właściwości do filtrowania to nazwa, rok, cena i km. Cena nieruchomości i km to liczby (stąd użycie .toString). Chcę również kontrolować wielkie litery (stąd .toLowerCase). Chciałbym również móc podzielić zapytanie filtru na różne słowa (np. Biorąc pod uwagę filtr 2006 Acura, wyszukuje on dopasowania 2006 z rokiem i Acura z nazwą).

Funkcja, którą przekazuję do filtra

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

Jeśli jesteś otwarty na korzystanie z bibliotek innych firm, przydatne mogą być `` Filtry kątowe '' z ładną kolekcją filtrów:

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

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

Mam nadzieję, że ta odpowiedź pomoże, Filtr wielu wartości

I roboczy przykład na tych skrzypcach

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

Jest tutaj kilka dobrych rozwiązań, ale proponuję wybrać inną drogę. Jeśli wyszukiwanie jest najważniejsze, a właściwość „sekret” nie jest w ogóle używana w widoku; moim podejściem byłoby użycie wbudowanego filtru kątowego ze wszystkimi jego zaletami i po prostu zmapowanie modelu do nowej tablicy obiektów.

Przykład z pytania:

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

Teraz w html po prostu użyj zwykłego filtru, aby przeszukać obie te właściwości.

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

Całkiem proste podejście z użyciem filterBy w angularJs

Aby pracować plnkr, kliknij ten link

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

To specjalnie wykorzystało pojedynczą właściwość do wyszukiwania w wielu kolumnach, ale nie we wszystkich.

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

kontroler

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

})();

Rozwiązałem to po prostu:

<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

Oto wyszukiwanie z rozróżnianiem wielkości liter, które również rozdziela Twoje wyszukiwanie na słowa, które mają być wyszukiwane również w każdym modelu. Dopiero gdy znajdzie spację, spróbuje podzielić zapytanie na tablicę, a następnie przeszukać każde słowo.

Zwraca prawdę, jeśli każde słowo znajduje się przynajmniej w jednym z modeli.

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

Filtr może być obiektem JavaScript z polami i możesz mieć wyrażenie:

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

Lubię, gdy jest to możliwe, proste. Musiałem pogrupować według Międzynarodowe, przefiltrować wszystkie kolumny, wyświetlić liczbę dla każdej grupy i ukryć grupę, jeśli nie ma żadnych elementów.

Poza tym nie chciałem dodawać niestandardowego filtru tylko dla czegoś tak prostego.

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

Mogę się bardzo spóźnić, ale to właśnie zrobiłem. Zrobiłem bardzo ogólny filtr.

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

    })

Następnie użyj tego w ten sposób

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

Twoje pole wyszukiwania będzie podobne

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

gdzie name i device_id to właściwości w dvs

Oto proste rozwiązanie dla tych, którzy chcą szybkiego filtrowania względem obiektu:

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

Filtr tablicy pozwala na naśladowanie obiektu, który próbujesz filtrować. W powyższym przypadku następujące klasy działałyby dobrze:

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

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

A jak mogłaby wyglądać talia:

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

  return {
    Cards: _cards
  };
};

A jeśli chcesz filtrować wiele właściwości obiektu, oddziel nazwy pól przecinkami:

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

EDYCJA: Oto działający plik plnkr, który zawiera przykład filtrów pojedynczych i wielu właściwości:

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