Create a multiple filter with only one input

Question

Create a multiple filter with only one input

Navigation

#1 by (0 votes)

2

On my system, I created a directive that gets the parameters needed to update a table, which would be:

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's filtering by title, getting the ng-model "$ scope.filter" from the input.

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

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

I tried to put another object in the filter, tried to put another position in the object, but I did not succeed.

$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 a policy scope to be more dynamic.

I'm using the Samu / angular-table .

EDITION

I forgot to mention earlier, but the ng-model from where I shot 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 just gets the parameters of where to take the items from the list and their configuration and does the rest basically alone, such as:

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

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

javascript angularjs angularjs-directives

asked by anonymous 12.11.2016 / 15:12

1 answer

MYSQL - Select 2 tables ibm_db2 PHP7 Nginx

score 0 · Answer 1

I would start by creating the scope of the directive , and pass the inputs received into the scope of the directive to make it independent of the driver code in which it is used.

And simplify the code because there is a lot of confusion in the variable declaration, which improves your 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 template.

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