0

Pessoal estou tendo problemas em usar um filtro em conjunto com ng-repeat. Tenho um json de eventos onde quero que, ao selecionar um tipo de evento no select, o filtro retorne um novo json com somente os eventos que possuem o tipo de evento escolhido, este é meu código

CONTROLLER

            $scope.filtro = "";
            $scope.eventos = [
            {
                data: "2016-05-09",
                eventos: [1, 5, 3, 7]
            },
            {
                data: "2016-05-08",
                eventos: [2, 0]
            },
            {
                data: "2016-05-07",
                eventos: [0, 3, 6]
            },
            {
                data: "2016-04-03",
                eventos: [1, 6, 7, 8]
            },
            {
                data: "2016-04-02",
                eventos: [7]
            },
            {
                data: "2015-01-01",
                eventos: [7, 3]
            }
        ];

HTML

    <div ng-repeat="(key,evento) in (eventos|filtraEvento:filtro)">
        <div><b style="color:red">{{key}}º) - </b>{{evento.data}}</div>
        <div>
            <span ng-repeat="e in evento.eventos">[{{e}}]</span>
        </div>
    </div>
    <select ng-model="filtro">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select>

FILTRO

.filter('filtraEvento', ['Util', function (Util) {
    return function (eventos, tipoEvento) {
        var eventosFiltrado = [];
        if (!Util.isNull(tipoEvento)) {
            for (var i = 0; i < eventos.length; i++) {
                var evento = [];
                for (var j = 0; j < eventos[i].eventos.length; j++) {
                    if (eventos[i].eventos[j] == tipoEvento) {
                        evento.push(eventos[i].eventos[j]);
                    }
                }
                if (evento.length > 0) {
                    eventosFiltrado.push({
                        data: eventos[i].data,
                        eventos: evento
                    });
                }

            }
        } else {
            eventosFiltrado = eventos;
        }
        return eventosFiltrado;
    }
}]);

sem filtrar o sistema exibe normal, mas se eu escolher algum filtro, alem de dar o erro:

  "Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!"

o sistema duplicou muitas vezes o resultado: Ex: Se eu escolher o filtro "2" o resultado exibido seria:

1º)2016-05-08
1º)2016-05-08
1º)2016-05-08
1º)2016-05-08
1º)2016-05-08
.
.
.
seguido do json original

Desde já agradeço por qualquer ajuda, desculpem se fiz algo fora do padrão do site, sou novo por aqui

2 Respostas 2

0

Ola pelo que entendi você quer filtrar quais datas possuem o numero selecionado.

Coloquei um identificador de campo no JSON para que seja possível você utilizar o próprio filtro do angular veja abaixo como ficou o JSON.

          $scope.eventos = [
        {
            data: "2016-05-09",
            eventos: [
              {numero: 1}, 
              {numero: 5}, 
              {numero: 3}, 
              {numero: 7}
              ]
        },
        {
            data: "2016-05-08",
            eventos: [
              {numero:2},
              {numero:0}
              ]
        },
        {
            data: "2016-05-07",
            eventos: [
              {numero:0},
              {numero:3},
              {numero:6}
              ]
        },
        {
            data: "2016-04-03",
            eventos: [
              {numero:1}, 
              {numero:6}, 
              {numero:7}, 
              {numero:8}
              ]
        },
        {
            data: "2016-04-02",
            eventos: [{numero:7}]
        },
        {
            data: "2015-01-01",
            eventos: [
                {numero:7}, 
                {numero:3}
              ]
        }
    ];

Depois coloquei um parametro de filtro que nomei como filterTxn

   <div ng-repeat="evento in eventos  | filter: filterTxn">

E coloquei este parametro no seu ng-model como nome do campo que voce quer filtrar no JSON no caso e campo numero do nó eventos entao fica filterTxn.eventos.numero.

   <select ng-model="filterTxn.eventos.numero">

Ao selecionar o select ele filtra e apresenta apenas os dados que contem o numero selecionado.

Uma OBS como o Nó evento contem um Array de numeros ele tras a Array inteira.

Espero ter ajudado publiquei no Plunker este teste se quiser ver.

https://plnkr.co/edit/MKGpSxWUvcTOz42kEt1X?p=preview

1
  • obrigado ! funcionou perfeitamente, agradeço a gentileza e dedicação em me ajudar Commented 13/05/2016 às 12:13
0

Se você se preocupa com performance, NÃO USE PIPE FILTER

(eventos | filtraEvento:filtro) //Não use o filtro assim ' | filtro'

Cada interação do $digest, independente de ter sido originada pelo filtro, por um ng-click, ou qualquer outro tipo de disparo, irá rodar o seu filtro 2 vezes por $digest. Ou seja, a grosso modo falando, qualquer outra interação que você tenha em sua view irá rodar esse filtro, mesmo que não tenha nada a ver com o filtro propriamente dito.

Como resolver? Faça isso no controller e atualize apenas o valor do $scope, desse modo você irá rodar o filtro somente 1 vez e quando ele realmente for usado.

Como? (E agora também já respondo sua dúvida). É importante salientar que você não precisa alterar sua estrutura de JSON para fazer isso funcionar, ok? Outra diferença é que você pode simplificar seu código utilizando:

angular.forEach(colecao, function(objeto, index) {
    //Loop aqui
})

Isso substitui o for (). Agora abaixo veja um exemplo de como usar ele em seu controller:

var eventos = [
    { 
        data: "2016-05-09",
        eventos: [1, 5, 3, 7]
    },
    [...etc...]
];

$scope.eventos = eventos;

/* Função de Filtro */
$scope.rodaFiltro = function(filtro) {

    if (filtro) { //Se algum filtro foi selecionado, aplicamos a filtragem
        var filtrados = [];

        angular.forEach(eventos, function(obj){ //Loop na coleção
            angular.forEach(obj.eventos, function (item) { //Loop no tipo de evento
                if(item == filtro) { //Verifica se o evento é igual a um dos eventos cadastrados na data
                    filtrados.push(obj); //Se sim, coloca ele na array de filtrados
                }
            })
        })

        $scope.eventos = filtrados; //Atualiza a lista

    } else { //Se nenhum filtro foi selecionado, voltamos a lista original
        $scope.eventos = eventos;
    }
}

Veja um exemplo funcionando: https://plnkr.co/edit/ILoCL2?p=preview

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .