Popular a table with form data in Angularjs

Question

Popular a table with form data in Angularjs

Asked 9 years ago

Viewed 2,945 times

4

I am learning angular.js and am having difficulties with the following code

var myapp = angular.module("myapp", [])

myapp.controller('controller', function reset($scope){
  $scope.reset = function(){
    $scope.nome = " ";
    $scope.nota1 = " ";
    $scope.nota2 = " ";
  }
  $scope.reset();
});

myapp.controller('controller', function enviar($scope){
  $scope.enviar = function(){
    nome = $scope.nome;
    nota1 = $scope.nota1;
    nota2 = $scope.nota2;
    media = $scope.media;
    situacao = $scope.situacao;
    media = (nota1 + nota2)/2;
    if (media >= 10){
      situacao = "Aprovado";
    } else if (media > 0 && media < 8 ){
      situacao = "Reprovado";
    } else {
      situacao = "Em exame";
    }
    var $scope.student = {
      nome, nota1, nota2, media, situacao
    };

  }
  $scope.enviar();
});

Whenever I put the data in the form it does not update the table

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script type="text/javascript" src="cadastro.js"></script>
    <title>Cadastro de Notas</title>
  </head>
  <body ng-app= "myapp" ng-controller= "controller">
    <form action="index.html" method="GET">
      <p>
        <label for="studentname">Nome do estudante:</label>
        <input type="text" id="nome" ng-model="student.name"/><br />

        <label for="nota1">Primeira nota</label>
        <input type="number" id="nota1" ng-model="student.nota1"/><br />

        <label for="nota2">Segunda nota</label>
        <input type="number" id="nota2" ng-model="student.nota2"/><br />

        <button ng-click="enviar()">Enviar</button>
        <button ng-click="reset()">Apagar</button>
      </p>
    </form>
    <table border="2">
      <tr>
        <th>Nome</th>
        <th>Nota 1</th>
        <th>Nota 2</th>
        <th>Media</th>
        <th>Situacao</th>
      </tr>
      <tr ng-bind>
        <th>{{nome}}</th>
        <th>{{nota1}}</th>
        <th>{{nota2}}</th>
        <th>{{media}}</th>
        <th>{{situacao}}</th>
      </tr>
    </table>
  </body>
</html>

Please help me thanks

2 answers

Browser other questions tagged javascript html angularjs

You are not signed in. Login or sign up in order to post.

by Cezar • **816** points · Answer 1 · 2015-10-13T14:11:54+00:00

You did it wrong, but from what I understand you want to record a list of students, deciding whether or not he was approved by the average.

Study the angular in a progressive way, that gradually you will understand its functioning, realize that in my example the code changes a lot.

I made a basic example, without checking if the typing is correct, so type in the average integer numbers to work.

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

myapp.controller('myctrl', function($scope) {
  
  $scope.student = [];
  
  $scope.name = "";
  
  $scope.nota1 = "";
  
  $scope.nota2 = "";
  
  console.log($scope.student);

  $scope.enviar = function(name, nota1, nota2) {

    var media = (nota1 + nota2) / 2

    var situacao = media > 6 ? 'Aprovado' : 'Reprovado';

    $scope.student.push({
      'nome': name,
      'nota1': nota1,
      'nota2': nota2,
      'media': media,
      'situacao': situacao
    });
    
    $scope.reset();
    
  }

  $scope.reset = function() {
    
    $scope.name = "";
    
    $scope.nota1 = "";
    
    $scope.nota2 = "";
    
  }

  $scope.reset();

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myctrl">
  <form action="index.html" method="POST">
    <p>
      <label for="studentname">Nome do estudante:</label>
      <input type="text" id="nome" ng-model="name" />
      <br />

      <label for="nota1">Primeira nota</label>
      <input type="number" id="nota1" ng-model="nota1" />
      <br />

      <label for="nota2">Segunda nota</label>
      <input type="number" id="nota2" ng-model="nota2" />
      <br />

      <button ng-click="enviar(name, nota1, nota2);">Enviar</button>
      <button ng-click="reset()">Apagar</button>
    </p>
  </form>
  <table border="2">
    <tr>
      <th>Nome</th>
      <th>Nota 1</th>
      <th>Nota 2</th>
      <th>Media</th>
      <th>Situacao</th>
    </tr>
    <tr ng-repeat="x in student" ng-if="x.nome">
      <th>{{x.nome}}</th>
      <th>{{x.nota1}}</th>
      <th>{{x.nota2}}</th>
      <th>{{x.media}}</th>
      <th>{{x.situacao}}</th>
    </tr>
  </table>
</div>

There are several ways to implement this, but this was very simple for you to understand $scope, ng-repeat and ng-if. In itself website have examples.

by MoshMage • **1,789** points · Answer 2 · 2015-10-13T14:11:52+00:00

Okay. You have some things wrong. First of all, here’s the code working.

One. you’re setting your controller twice. the first in myapp.controller('controller', function reset($scope){ and a second time in myapp.controller('controller', function enviar($scope){.

This has to be just a statement, and preferably with an anonymous function:
myapp.controller('controller', function ($scope){

After this, you have to gather the code that was in the "two" controllers into one. (see the fiddle);

nome = $scope.nome;
nota1 = $scope.nota1;
nota2 = $scope.nota2;
media = $scope.media;
situacao = $scope.situacao;

These statements have to have a var behind.

var $scope.student = {
  nome, nota1, nota2, media, situacao
};

Here you are redefining the $scope which is a terrible thing once you break the whole controller and it only exists student. What you want is $scope.student (notice that there is no var before $scope) that what it does is add a new property to $scope existing (rather than rewriting it).

$scope.reset(); and $scope.enviar(); are being called on application startup, I don’t know if you want that to happen.

See the fiddle who’s in the front row to see the correct code.