Send data by Angular

Question

Send data by Angular

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Hello

In the form of html I do the following:

<div class="container jumbotron" ng-controller="crudCtrl">
   <form role="form">
       <div class="form-group">
           <label for="nome">Nome:</label>
           <input type="text" class="form-control" ng-model="nome" id="">
       </div>
       <div class="form-group">
           <label for="sexo">Sexo:</label>
           <input type="text" class="form-control" ng-model="sexo" id="sexo">
       </div>
       <div class="form-group">
           <label for="data">Data Nascimento:</label>
           <input type="text" class="form-control" ng-model="dataNascimento" id="data">
       </div>
       <div class="form-group">
           <label for="pais">País:</label>
           <input type="text" class="form-control" ng-model="pais" id="pais">
       </div>
       <button class="btn btn-default"  ng-click="Cadastrar()">Salvar</button>
   </form>
</div>

And do not angle the following:

var app = angular.module("crud", []);
app.controller("crudCtrl", function ($scope) {
    $scope.Cadastrar  = function(data) {
        $scope.MostrarTabela = true;

        $scope.nome = data.nome;
        $scope.sexo = data.sexo;
        $scope.datanasc = data.dataNascimento;
        $scope.pais = data.pais;
    }
});

Is the way I'm sending the data to controller wrong?

Because it displays the following error:

Can not read property 'name' of undefined

javascript angularjs

asked by anonymous 19.05.2016 / 19:46

2 answers

0

Yes, it's wrong.

When you declare your function in the controller, you say you will receive a parameter, in this case data - this is not wrong.

$scope.Cadastrar  = function(data) { ... }

The problem is in ng-click in your view, you are calling the function Cadastrar , but without passing any parameters.

ng-click="Cadastrar()"

When you try to access the data object in the controller, it is empty, it does not have any of the properties you tried to access.

How to fix?

Simple, first, in% with% of% with% create an object, for example ng-model .

<input type="text" class="form-control" ng-model="pessoa.nome">
<input type="text" class="form-control" ng-model="pessoa.sexo">

And in inputs pass the expected object.

ng-click="Cadastrar(pessoa)"

In this way, you will receive the object in the controller and you will not get the error.

19.05.2016 / 19:55

Index rendering sql query too slow Array, delete value [closed]

score 1 · Accepted Answer

Your input should look like this:

<input type="text" class="form-control" ng-model="cadastro.nome" id="">

With this, within your controller you can access each property as an array, as follows:

$scope.cadastro.nome;
$scope.cadastro.sexo;
//Etc...

//Ou seguindo pelo seu exemplo
$scope.nome = $scope.cadastro.nome

So you also no longer need to define the data object in the function, thus:

$scope.Cadastrar = function() { //Sem o data aqui
    //Função aqui
}

The most "correct" method, or at least the most common one (and I prefer to use) would be to pass the values through ng-submit and access them without having to delimit a $ scope for each field like you it did, but it all depends on the intended use of the form. But it would look like this:

<form role="form" ng-submit="Cadastrar(cadastro)">
   <div class="form-group">
       <label for="nome">Nome:</label>
       <input type="text" class="form-control" ng-model="cadastro.nome" id="">
   </div>

   // Demais campos aqui

   <button class="btn btn-default" type="submit">Salvar</button>
</form>

Then you can use controller as you are using it now.