Фильтрация по нескольким конкретным свойствам модели в AngularJS (в отношении ИЛИ)

Взгляните на пример здесь: http://docs.angularjs.org/api/ng.filter:filter

Вы можете выполнять поиск по любому из свойств телефона, используя, <input ng-model="search">и вы можете искать только по имени, используя <input ng-model="search.name">, и результаты соответствующим образом фильтруются по имени (ввод номера телефона не возвращает никаких результатов, как ожидалось).

Скажем , у меня есть модель со свойством «имя», свойство «телефон», и «секретно» собственности, как бы я идти о фильтрации по как «имя» и «телефон» свойства и не «секрет» собственности ? По сути, пользователь может ввести имя или номер телефона, и ng-repeatфильтр будет правильно отфильтрован, но даже если пользователь ввел значение, равное части «секретного» значения, он ничего не вернет.

Спасибо.

Вот плункер

Новый плункер с более чистым кодом и элементами списка поиска и запроса без учета регистра

Основная идея - создать функцию фильтра для достижения этой цели.

Из официального документа

функция: функция-предикат может использоваться для написания произвольных фильтров. Функция вызывается для каждого элемента массива. Конечный результат - это массив тех элементов, для которых предикат вернул истину.

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

Обновить

Некоторых людей может беспокоить производительность в реальном мире, и это правильно.

В реальном мире мы, вероятно, сделаем подобный фильтр из контроллера.

Вот подробный пост, показывающий, как это сделать.

Короче говоря, мы добавляем ng-changeво ввод для отслеживания новых изменений поиска

а затем запустить функцию фильтра.

Вы можете передать объект в качестве параметра в выражение фильтра, как описано в Справочнике по API . Этот объект может выборочно применять интересующие вас свойства, например:

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

Вот плункер

Внимание ... этот пример отлично работает с AngularJS 1.1.5, но не всегда так хорошо с 1.0.7. В этом примере 1.0.7 инициализируется со всем отфильтрованным, а затем работает, когда вы начинаете использовать входы. Он ведет себя так, как будто входы содержат несовпадающие значения, даже если они начинаются пустыми. Если вы хотите оставаться на стабильных выпусках, попробуйте это в своей ситуации, но в некоторых сценариях может потребоваться использовать решение @ maxisam до выпуска 1.2.0.

Я вдохновился ответом @ maxisam и создал свою собственную функцию сортировки, и я бы хотел поделиться ею (потому что мне скучно).

Ситуацию я хочу отфильтровать по массиву автомобилей. Выбранные свойства для фильтрации - это имя, год, цена и км. Цена собственности и км - это числа (отсюда и использование .toString). Я также хочу контролировать прописные буквы (следовательно .toLowerCase). Также я хочу иметь возможность разбить свой запрос фильтра на разные слова (например, учитывая фильтр 2006 Acura, он находит совпадения 2006 с годом и Acura с именем).

Функция я передаю фильтру

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

Если вы готовы использовать сторонние библиотеки, вам могут пригодиться Angular Filters с хорошей коллекцией фильтров:

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

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

Надеюсь, этот ответ поможет, фильтр с несколькими значениями

И рабочий пример на этой скрипке

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

Здесь есть несколько хороших решений, но я бы предложил пойти другим путем. Если поиск - это самая важная вещь, а свойство secret вообще не используется в представлении; Мой подход к этому заключался бы в использовании встроенного углового фильтра со всеми его преимуществами и простом сопоставлении модели с новым массивом объектов.

Пример из вопроса:

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

Теперь в html просто используйте обычный фильтр для поиска обоих этих свойств.

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

Довольно простой подход с использованием filterBy в angularJs

Для работы plnkr перейдите по этой ссылке

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

Это специально использовало одно свойство для поиска по нескольким столбцам, но не по всем.

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

контролер

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

})();

Я решил это просто:

<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

Вот поиск с учетом регистра, который также разделяет ваш поиск на слова для поиска в каждой модели. Только когда он найдет пробел, он попытается разбить запрос на массив, а затем искать каждое слово.

Он возвращает истину, если каждое слово есть хотя бы в одной из моделей.

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

Фильтр может быть объектом JavaScript с полями, и вы можете иметь выражение как:

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

Мне нравится, когда это возможно, просто. Мне нужно было сгруппировать по международному, отфильтровать по всем столбцам, отобразить количество для каждой группы и скрыть группу, если никаких элементов не существует.

Кроме того, я не хотел добавлять собственный фильтр только для таких простых вещей.

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

Я мог бы очень поздно, но это то, чем я закончил. Я сделал очень общий фильтр.

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

    })

Тогда используйте это так

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

Ваше окно поиска похоже

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

где name и device_id - это свойства в dvs

Вот простое решение для тех, кому нужен быстрый фильтр по объекту:

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

Фильтр массива позволяет имитировать объект, который вы пытаетесь фильтровать. В приведенном выше случае следующие классы будут работать нормально:

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

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

И где может выглядеть колода:

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

  return {
    Cards: _cards
  };
};

А если вы хотите отфильтровать несколько свойств объекта, просто разделите имена полей запятой:

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

РЕДАКТИРОВАТЬ: Вот рабочий plnkr, который предоставляет пример одного и нескольких фильтров свойств:

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