Popular a table with form data in angularjs

Question

Popular a table with form data in angularjs

Navigation

#1 by (4 votes)
#2 by (3 votes)

4

I am learning angular.js and am having difficulty 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><scripttype="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

javascript html angularjs

asked by anonymous 13.10.2015 / 15:23

2 answers

Creating Tabs Correctly on Android Currently How to import classes like HttpClient, DefaultHttpClient etc

score 4 · Answer 1

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

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

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

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><divng-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 a number of ways to implement this, but this has been pretty simple for you to understand $scope , ng-repeat and ng-if . On the site you have examples.

score 3 · Answer 2

Okay. You got some things wrong. First of all, here is the code to work .

First. You are setting your controller twice. the first one 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 join the code that was in the "two" controllers in one. (see fiddle);

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

These declarations must have a var ago.

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

Here you are resetting $scope which is a bad thing since it shares the whole controller and only exists student . What you want is $scope.student (note that you do not have var before $scope ) what you do is add a new property to $scope existing (instead of rewriting).

$scope.reset(); and $scope.enviar(); are being called at application startup, I do not know if you want this to happen.

See the fiddle on the first line to see the correct code.