0

Boa tarde, fiz o seguinte código: http://jsfiddle.net/27du7oaL/5/ . Acessando o JSFiddle, dá para constatar que o Angular mostra o título que esta no controller, mas não mostra nenhum dado relacionado ao array. Como resolver esse problema?

HTML

<div ng-app="Series">
  <div class="container" ng-controller="SeriesController">
    <h1>{{titulo}}</h1>
    <form autocomplete="off" ng-submit="adicionaSerie()">
      <div class="form-group">
        <label for="nome">Nome da serie:</label>
        <input type="text" pattern="{1,}" placeholder="Minímo 1 caractere" id="name" ng-model="novaSerie.nome" required>
      </div>
      <div class="form-group">
        <label for="produtora">Produra:</label>
        <input type="text" ng-model="novaSerie.produtora">
      </div>
      <footer><button type="submit">Adicionar serie</button></footer>
    </form> 
  </div>

  <ul>
    <li ng-repeat="serie in series">
    <h3>{{serie.nome}}</h3>
    <h3>{{serie.produtora}}</h3>
    </li>
  </ul> 

</div>

AngularJS :

var app = angular.module("Series", []);

app.controller("SeriesController", function($scope){

    $scope.titulo = "Adiciona Serie";

    $scope.series = [
        {
            nome: 'Nothing',
            produtora: 'Nothing Producers'

        }
    ];

    $scope.novaSerie = {};

    $scope.adicionaSerie = function() {
        var serie = angular.copy($scope.novaSerie);
        $scope.artistas.push(serie);
        $scope.novaSerie = {};
    }
});

1 Resposta 1

1

Tem dois erros aí:

  • A lista que deveria conter os itens de $scope.series está fora da div que contém a diretiva ne-controller.

  • Na função adicionaSerie tem a seguinte linha:

    $scope.artistas.push(serie);
    

    Isso deveria ser

    $scope.series.push(serie);
    

Veja o código funcionando:

var app = angular.module("Series", []);

app.controller("SeriesController", function($scope) {

  $scope.titulo = "Adiciona Serie";
  $scope.novaSerie = {};
  $scope.series = [
    {
      nome: 'Nothing',
      produtora: 'Nothing Producers'
    }
  ];

  $scope.adicionaSerie = function() {
    var serie = angular.copy($scope.novaSerie);
    $scope.series.push(serie);
    $scope.novaSerie = {};
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Series" ng-controller="SeriesController">
  <div class="container" >
    <h1>{{titulo}}</h1>
    <form autocomplete="off" ng-submit="adicionaSerie()">
      <div class="form-group">
        <label for="nome">Nome da serie:</label>
        <input type="text" pattern="{1,}" placeholder="Minímo 1 caractere" id="name" ng-model="novaSerie.nome" required>
      </div>
      <div class="form-group">
        <label for="produtora">Produra:</label>
        <input type="text" ng-model="novaSerie.produtora">
      </div>
      <footer>
        <button type="submit">Adicionar serie</button>
      </footer>
    </form> 
  </div>

  <ul>
    <li ng-repeat="serie in series">
      <h3>{{serie.nome}}</h3>
      <h3>{{serie.produtora}}</h3>
    </li>
  </ul> 
</div>

1
  • opa valeu, é que fui fazer um exemplo diferente sobre o meu problema, e nao percebi que nele coloquei fora da div, mas no original tinha colocado o ng-controller numa div global do site ai nao tinha funcionado nada, pior que só vim descobrir depois que estava olhando bem direitinho cada coisa e percebi que cometi que tinha colocado '; ' no lugar das ',' na separacao de atributos de um objeto... mas depois q corrigi deu certo. Commented 3/11/2017 às 19:36

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 .