AngularJS - ng-repeat is not working

Navigation
0

Good afternoon, I made the following code: link . Accessing the JSFiddle, you can see that the Angle shows the title that is in the controller, but does not show any data related to the array. How do I resolve this issue?

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 = {};
    }
});
    
asked by anonymous 03.11.2017 / 19:29

1 answer

0

There are two errors there:

  • The list that should contain the items of $scope.series is out of div that contains the ne-controller directive.

  • In function adicionaSerie it has the following line: 

    $scope.artistas.push(serie);

    This should be 

    $scope.series.push(serie);

See the code working: 

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><divng-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>
    
03.11.2017 / 19:58
Series of errors when compiling android studio Ubuntu 17.04 How to check if a time interval has conflicting dates with another time interval in php?