javascript – Create a multiple filter with just one input

Question:

On my system, I created a directive that receives the necessary parameters to update a table, which would be this:

function filtroAngularTable() {

    return {
        restrict: 'E',
        scope: {
            lista: '=',
            config: '='
        },
        controller: 'PaginacaoCtrl',
        templateUrl: 'app/diretivas/paginacao_at_table/html/filtro.html'
    }
}

Through this information I can update the table based on what I type:

$scope.listaOriginal = $scope.lista;
    $scope.listaFiltrada = $scope.listaOriginal;

    $scope.atualizarTabelaComFiltro = function () {

        $scope.listaFiltrada = $filter("filter")($scope.listaOriginal, {nome: $scope.filtro});
        $scope.lista = $scope.listaFiltrada;
        $scope.config.total = $scope.lista.length;
    }

So far it works fine, it's filtering by the title, getting the ng-model "$scope.filtro" from the input.

But the question is: How can I filter for another field, besides the title, with the same input?

For example, filter by first and last name using the same input.

I've already tried to put one more object in the filter, I tried to put another position on the object, but with no success.

$scope.listaFiltrada = $filter("filter")($scope.listaOriginal, {nome: $scope.filtro}, {sobrenome: $scope.filtro});
$scope.listaFiltrada = $filter("filter")($scope.listaOriginal, {nome: $scope.filtro, sobrenome: $scope.filtro});

I also wanted to make the list of fields I want to filter out as the scope of the directive, to make it more dynamic.

I'm using Samu/angular-table .

EDITION

I forgot to mention it earlier, but the ng-model I get the filter from is here:

<div class='ui icon input'>
     <i class='search icon'></i>
     <input placeholder='Pesquisar pelo título...' type='text' ng-model="filtro" ng-change="atualizarTabelaComFiltro()">
</div>

So, as I said, I'm using Samu/angular-table . It just receives the parameters of where to take the items from the list and their configuration and basically does the rest by itself, like for example:

<table class="ui compact table" at-table at-paginated at-list="lista" at-config="config"></table>

I still can't see how I can create an external input to update the table based on dynamic filters.

Answer:

I would start by creating the scope of the directive itself , and passing incoming inputs to the scope of the directive to make it independent of the controller code it is used in.

And simplifying the code because there is a lot of confusion in the declaration of variables, which improves its readability.

function filtroAngularTable() {
  return {
    restrict: 'E',
    scope: {
      //filtro tem que ser um objecto por ex. {nome:"value",sobrenome:"value"}
      filtro: '=',
      lista: '=',
      config: '='
    },
    templateUrl: 'app/diretivas/paginacao_at_table/html/filtro.html',
    link:function(scope,element,attributes) {
      //o filtro "filter" retorna um novo array com os items seleccionados.
      scope.listaFiltrada = $filter("filter")(scope.lista, scope.filtro);

      scope.config.total = scope.lista.length||scope.listaFiltrada.length;
      //não consegui compreender se queria usar a length do array original ou do filtrado
    }
  }
}

another option is to use the filter in the ng-repeat template.

<linha ng-repeat="item in lista|filter:filtro"></linha>
Scroll to Top