Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Filtro avançado: dúvida no two-way data binding

Olá,

Realizei algumas modificações no exercício proposto do capítulo 5 do curso AngularJS (Melhorando a experiência do usuário) e, ao renomear o nome do parâmetro no qual receberá a string digitada para a filtragem das imagens (em fotos-controller.js), o sistema continua funcionando e filtrando normalmente, mesmo com este nome sendo diferente do nome inserido no filtro do ng-repeat e também do ng-model.

Veja código abaixo:

<div class="row">
    <div class="col-md-12">
        <form>
            <input ng-model="nomeFiltro" class="form-control" placeholder="Clique e digite para filtrar..." ng-model-options="{debounce: 500}">
        </form>
    </div>
</div>
<div class="row">
    <meu-painel class="col-md-2 painel-animado" ng-repeat="fotoAux in pictures | filter: nomeFiltro" titulo="{{fotoAux.titulo}}">
        <img class="img-responsive center-block" src="{{fotoAux.url}}" alt="{{fotoAux.titulo}}">
    </meu-painel>
</div>
// public/js/controllers/fotos-controller.js

angular.module('nomeMinhaAplicacaoWeb').controller('FotosController', function($scope, $http) {

    $scope.pictures = [];
    $scope.filtroDigitado = '';

    $http.get('v1/fotos')
    .success(function(fotos) {
        $scope.pictures = fotos;
    })
    .error(function(erro) {
        console.log(erro);
    });

});

Repare que na view, o filtro está definido com o nome "nomeFiltro" (em filter do ng-repeat e no nome do ng-model) e no controller esse nome está definido como "filtroDigitado".

Observações: 1) O filtro também continuou funcionando mesmo após a remoção da linha $scope.filtroDigitado = ''; do controller; 2) O cache do navegador também foi limpado antes da execução dos testes.

2 respostas
solução!

Oi Wanderson. Quando usamos ngModel a propriedade é criada dinamicamente em $scope, mas eu gosto de defini-la para deixar mais claro.

Sucesso e bom estudo.

Bom dia Flavio.

Obrigado pelo esclarecimento.

Abraços.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software