Filter example in Angular 1

Question

I’m trying to apply a filter with angle 1 But I’m only getting one field. How can I make a filter that can search for more fields? In my case will have a filter with 5 types of fields.

Answer 1

Just use an object to filter.

angular.module('filter-app', []);
angular.module('filter-app').controller('mainController', mainController);

const itensSelect = [
  { id: 1, nome: 'PlayStation 4' },
  { id: 2, nome: 'XBox 360' }
];

// Aqui usei os itens do array acima pra não ficar repetindo
const data = [
  { nome: 'LINQ', navegador: 'Chrome', console: itensSelect[1] },
  { nome: 'Linus', navegador: 'Firefox', console: itensSelect[0] },
  { nome: 'Zelda', navegador: 'Firefox', console: itensSelect[1] },
  { nome: 'Zelia', navegador: 'Chrome', console: itensSelect[0] }
];

function mainController($scope) {
  $scope.data = data;
  $scope.itensSelect = itensSelect;  
  $scope.search = {};
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="filter-app" ng-controller="mainController">
  
  <input type="text" ng-model="search.nome" placeholder="Filtrar por nome">
  <input type="text" ng-model="search.navegador" placeholder="Filtrar por navegador">

  <select ng-options="item.id as item.nome for item in itensSelect" ng-model="search.console.id"> 
  </select>

  <table>
    <thead>
      <tr>
        <th>Nome</th>
        <th>Navegador</th>
        <th>Console</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="usuario in data | filter: search">
        <td>{{usuario.nome}}</td>
        <td>{{usuario.navegador}}</td>
        <td>{{usuario.console.nome}}</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

Implement a general search filter.

The example below serializes the object and caches the result into a hidden property of the object. The search is then performed on the serialized content.

Click on Execute to see the filter in action:

angular.module('myApp', [])
        .filter("buscaGenerica", function() {
            return function(source, text) {
                if (!source) return false;
                if (!text) return source;

                return source.filter(function(item) {
                    if (!item._compiledJSON) item._compiledJSON = JSON.stringify(item).toLowerCase();

                    text = text.toLowerCase();

                    return item._compiledJSON.indexOf(text) > -1;
                });
            };
        })
.controller('myController', function($scope){
  
  $scope.searchTerms = '';
  $scope.dados = [
  {
    "_id": "595eac4835ccf1c3cf5c6f91",
    "isActive": true,
    "age": 30,
    "eyeColor": "blue",
    "name": {
      "first": "Mayo",
      "last": "Madden"
    },
    "company": "EXODOC",
    "email": "[email protected]",
    "about": "Veniam laboris pariatur aute et pariatur duis aliqua nisi anim deserunt aliquip duis. Officia elit ut amet consectetur sint officia laborum officia nostrud nulla. Cillum reprehenderit anim qui sunt voluptate fugiat pariatur occaecat exercitation laborum minim eu. Deserunt exercitation ea commodo et ut qui non consequat ad culpa consequat cupidatat. Cupidatat cillum anim ullamco sunt ex sit laborum do laborum sint laborum. Ullamco aute voluptate consectetur Lorem ipsum laborum occaecat nisi. Proident adipisicing consequat laborum esse commodo incididunt nisi do ea ut excepteur."
  },
  {
    "_id": "595eac48e9b3933ae50b82ba",
    "isActive": true,
    "age": 25,
    "eyeColor": "green",
    "name": {
      "first": "Melton",
      "last": "Nunez"
    },
    "company": "FUELWORKS",
    "email": "[email protected]",
    "about": "Ipsum irure eiusmod minim dolore anim quis elit id sint consequat ea velit cillum veniam. Ut sint reprehenderit commodo nostrud cupidatat occaecat velit amet dolore reprehenderit irure pariatur. Irure id sit pariatur nisi cillum sunt in proident cillum eiusmod. Ex qui magna occaecat fugiat. Culpa cillum proident deserunt exercitation elit officia in. Dolore nisi anim ullamco duis deserunt mollit excepteur ad veniam. Amet nisi occaecat culpa laboris ut fugiat voluptate officia."
  },
  {
    "_id": "595eac48d830aa0900d9e39c",
    "isActive": false,
    "age": 37,
    "eyeColor": "blue",
    "name": {
      "first": "Cobb",
      "last": "Frazier"
    },
    "company": "ISOSURE",
    "email": "[email protected]",
    "about": "Consectetur irure deserunt consequat in voluptate reprehenderit est consectetur sunt qui labore eu do. Aliquip anim eu amet officia incididunt nostrud consequat culpa esse. Cupidatat eiusmod ut tempor qui nisi ipsum laboris. Est reprehenderit reprehenderit adipisicing dolore officia id. Ullamco ad voluptate ea cupidatat duis culpa cupidatat veniam elit ex reprehenderit. Culpa occaecat Lorem eu sit est sit irure dolore deserunt laboris."
  },
  {
    "_id": "595eac48d7c0694efa4eda9f",
    "isActive": true,
    "age": 22,
    "eyeColor": "green",
    "name": {
      "first": "Murphy",
      "last": "Walsh"
    },
    "company": "MACRONAUT",
    "email": "[email protected]",
    "about": "Eu occaecat dolore reprehenderit irure. Non occaecat eiusmod nisi laborum ipsum ullamco in. Deserunt anim culpa minim ullamco irure ut."
  },
  {
    "_id": "595eac4841a32cc9d3d95b6a",
    "isActive": false,
    "age": 40,
    "eyeColor": "blue",
    "name": {
      "first": "Constance",
      "last": "Newman"
    },
    "company": "NORSUP",
    "email": "[email protected]",
    "about": "Voluptate incididunt amet consequat est pariatur culpa exercitation. Eu ut proident voluptate sunt aliqua minim Lorem laboris qui incididunt id esse enim. Excepteur dolore ullamco incididunt sint magna consequat sit. Officia nostrud veniam sunt et elit proident. Dolore duis sunt ut non et pariatur. Veniam nisi aute aliqua tempor sint velit."
  },
  {
    "_id": "595eac4860bbd2894e2d067e",
    "isActive": false,
    "age": 33,
    "eyeColor": "green",
    "name": {
      "first": "Concepcion",
      "last": "Bean"
    },
    "company": "NIMON",
    "email": "[email protected]",
    "about": "Nulla reprehenderit pariatur ex adipisicing laborum deserunt tempor officia aliquip. Quis minim proident veniam irure non id duis. Ex do proident id deserunt qui cillum qui nulla aute consectetur aliqua eu. Ad commodo laborum anim consectetur irure in. Minim sint elit esse magna tempor ad."
  },
  {
    "_id": "595eac48f4218a842009fae7",
    "isActive": true,
    "age": 24,
    "eyeColor": "blue",
    "name": {
      "first": "Mccarty",
      "last": "Compton"
    },
    "company": "INTERODEO",
    "email": "[email protected]",
    "about": "Quis laborum nulla pariatur laboris aliquip dolore ut consequat incididunt laboris fugiat voluptate. Cillum irure esse anim non in labore minim ipsum. Culpa consequat ea pariatur laborum ea incididunt occaecat esse. Ad officia consequat non nostrud est laboris minim quis cillum occaecat duis. Tempor et anim officia consectetur dolor labore esse nisi culpa pariatur fugiat. Anim cupidatat elit excepteur commodo duis id. Pariatur nisi excepteur sint ad Lorem."
  },
  {
    "_id": "595eac48d58e11bde65ea57c",
    "isActive": false,
    "age": 25,
    "eyeColor": "blue",
    "name": {
      "first": "Ward",
      "last": "Pruitt"
    },
    "company": "MAGNAFONE",
    "email": "[email protected]",
    "about": "Cupidatat esse exercitation irure esse irure nulla ullamco. Magna fugiat aliqua eu pariatur ea mollit excepteur sit esse laboris laborum consequat. Deserunt consequat veniam tempor irure deserunt pariatur laborum dolor et non Lorem."
  }
]
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="myApp">
  <div ng-controller='myController'>
  <input ng-model='searchTerms'/>
  <ul>
    <li ng-repeat='i in (dados | buscaGenerica: searchTerms)'>
      {{i.name.first}} {{i.name.last}} ({{i.email}})
    </li>
  </ul>
  </div>
</div>