Create a multiple filter with only one input

Question

On my system, I created a directive that gets the parameters needed 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 perfectly, it is filtering by title, getting the ng-model "$Scope.filter" input.

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

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

I have tried to put one more object in the filter, tried to put another position in the object, but was unsuccessful.

$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 be passed as Scope of the directive, to be more dynamic.

I’m using the Samu/angular-table.

EDITION

I forgot to mention earlier, but the ng-model from which I draw what to filter 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 the Samu/angular-table. It only receives the parameters from where to take the items from the list and its configuration and does the rest basically alone, 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 1

I’d start by creating my own Scope of directive, and pass inputs received to the directive’s Scope to make it independent of the controller code on which it is used.

And simplify the code because there is a great confusion in the declaration of variables, which improves its reading.

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.

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