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

Itens não se repetem

Boa tarde,

Estou tentando realizar o ng-repeat, mas ele não está listando as três imagens pra mim, apenas uma e encontro este erro no log:

Failed to load resource: the server responded with a status of 404 (Not Found)
angular-animate.min.js:6 Uncaught TypeError: Cannot read property 'module' of undefined
    at angular-animate.min.js:6
    at angular-animate.min.js:32

Pelo o que entendi, parece que não importei o angular.animate, segue o controller e o trecho da view:

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

    $scope.fotos = [{
        titulo : 'Leão 1',
        url : 'http://www.fundosanimais.com/Minis/leoes.jpg'

    },

    {
        titulo : 'Leão 2',
        url : 'http://www.fundosanimais.com/Minis/leoes.jpg'

    },

    {
        titulo : 'Leão 3',
        url : 'http://www.fundosanimais.com/Minis/leoes.jpg'

    }


    ];

});

view:

<!DOCTYPE html>
<html lang="pt-br" ng-app="alurapic">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Alurapic</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <script src ="js/lib/angular-animate.min.js"></script>
        <script src ="js/lib/angular.min.js"></script>
        <script src ="js/main.js"></script>
        <script src ="js/controllers/fotos-controller.js"></script>
    </head>
    <body ng-controller="FotosController">
        <div class="container">
        <div class="jumbotron">
            <h1 class="text-center">Alurapic</h1>
        </div>            
            <div ng-repeat="foto in fotos" class="panel panel-default">
                <div class="panel-heading">
                   <h3 class="panel-title">{{foto.titulo}}</h3>
                </div>
            </div>
           <div class="panel-body">
                <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
           </div>


        </div> <!-- fim container -->        
    </body>
</html>

agradeço a atenção.

Att, Igor

2 respostas
solução!

Experimenta trocar a ordem de declaração dos scripts. Atualmente está assim:

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

Tenta deixar assim:

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

Opa Boa Noite,

Deu certo Alberto,

Além do teste que você sugeriu, alterei o fechamento da DIV 'panel panel-default'

Att, Igor Federizi