Entrar Ainda não tem acesso?
Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
14
respostas

Filtro não funciona mais

Referente ao curso AngularJS: crie webapps poderosas

por Rafael Menezes da Silva
| 701.6k xp | 218 posts

Após eu implementar a funcionalidade de recursos ('ngResource') o meu filtro parou de funcionar. Tenho um h1 com um data-binding com a propriedade filtro do meu controller. Mas a lista de ads não é mais filtrada.

Seguem algumas partes do código que julguei mais importantes.

=============================

main.js

=============================

angular.module('divulgabairro',['minhasDiretivas', 'ngAnimate', 'ngRoute', 'ngResource']) .config(function($routeProvider, $locationProvider) {

$routeProvider.when('/', { templateUrl: 'partials/principal.html', controller: 'AdsController' });

============================

=============================

principal.html

=============================

{{filtro}}

=============================

=============================

principal.html

=============================

//código omitido

{{filtro}}

(AQUI ENTRA O PRINCIPAL.HTML
14 respostas
por Rafael Menezes da Silva
| 701.6k xp | 218 posts

main.js

angular.module('divulgabairro',['minhasDiretivas', 'ngAnimate', 'ngRoute', 'ngResource'])
.config(function($routeProvider, $locationProvider) {

    $routeProvider.when('/', {
        templateUrl: 'partials/principal.html',
        controller: 'AdsController'
    });

    $routeProvider.when('/termos', {
        templateUrl: 'partials/termos.html',
        controller: 'AdsController'
    });

    $routeProvider.when('/cadastro', {
        templateUrl: 'partials/novo.html',
        controller: 'AdsController'
    });


    $routeProvider.otherwise( 
        { redirectTo: '/termos'}
    );
})

principal.html

<h1>{{filtro}}</h1>
<div class="ad-list">
    <item  class="ad-animado" ng-repeat="ad in ads | filter: filtro" foto="{{ad.foto}}" nome="{{ad.nome}}" telefone="{{ad.telefone}}">
    </item>
</div>

controller

angular.module('divulgabairro').controller('AdsController', function($scope, $http, $resource, $routeParams){
    $scope.ads = [];
    $scope.filtro = '';

    var recursoAds = $resource('v1/ads');

    recursoAds.query(function(ads){
        $scope.ads = ads;    
    }, function(erro){
        console.log(erro);
    });

});

index.html

<base href="/">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/estilo.css">
    <link rel="stylesheet" type="text/css" href="css/efeitos.css">
    <link rel="stylesheet" type="text/css" href="css/mediaqueries.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">

    <script src="js/lib/angular.min.js"></script>
    <script src="js/lib/angular-animate.min.js"></script>
    <script src="js/lib/angular-route.min.js"></script>
    <script src="js/lib/angular-resource.min.js"></script>
    <script src="js/main.js"></script>

    <script src="js/controllers/ads-controller.js"></script>
    <script src="js/directives/minhas-diretivas.js"></script>
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Rafael você criou o filtro mas em nenhum momento declarou o valor para ele, qual seria o problema que esta tendo ? explique melhor por favor.

por Rafael Menezes da Silva
| 701.6k xp | 218 posts

Eu digito os dados e a lista permanece a mesma. Porém o

<h1>{{filtro}}</h1>

funciona perfeitamente.

por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Não achei o código do input referente ao filtro, posta ele para eu dar uma olhada.

por Rafael Menezes da Silva
| 701.6k xp | 218 posts

Claro!

<div class="search-wrapper">
            <form id="search-form">
                <input type="text" class="search-input" placeholder="O que procura? Exemplo: Veterinária em Bangú" ng-model="filtro" autofocus>
                <button class="btn-search"><span class="fa fa-search"></span></button>
            </form>
        </div>
por Rafael Menezes da Silva
| 701.6k xp | 218 posts

Camarada, falei besteira o 

<h1> {{filtro}} </h1>

Estava funcionando somenta no index.html no meu partial não.

por Rafael Menezes da Silva
| 701.6k xp | 218 posts

Fiz umas alterações, colocando o atributo ng-controller no meu form de busca, forçei uma alteração no valor da minha variável filtro no meu controller.

$scope.filtro = 'Churrascaria';

e ao recarregar a página estava filtrando, o input mostrando o texto churrascaria. Porém aparentemente meu input que não está 'sincronizado' com o atributo no controller. O que pode ser?

por Rafael Menezes da Silva
| 701.6k xp | 218 posts

Só funcionou quando tirei as declarações de controler no meu arquivo main.js deixando nas rotas deste jeito:

    $routeProvider.when('/', {
        templateUrl: 'partials/principal.html'
    });

Além disso tive que declarar meu controller no body, na minha index.html:

<body class="menu-opens" ng-controller="AdsController">
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Rafael realmente não sei te falar o que pode ter acontecido, precisaria do projeto para fazer uns testes melhores para chegar ao problema.

por Rafael Menezes da Silva
| 701.6k xp | 218 posts

Com certeza! Pode me passar seu e-mail?

por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

matheushcastiglioni@gmail.com, manda para mim ele compactado que eu dou uma olhada.

solução!
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Fala ai Rafael, respondi o email com o projeto correto, la descrevi as mudanças para que o filtro funcionasse.

por Rafael Menezes da Silva
| 701.6k xp | 218 posts

SHOW DE BOLA!!! Valeu!

por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Depois da um feedback se deu certo.

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA