How to insert and restate a list of items in the database

Asked

Viewed 243 times

0

The code below allows the insertion of n items in the array $scope.items[]:

var app = angular.module('app', []);
    app.controller('controlador', function($scope, $http) {
	$scope.user = {};
        $scope.produtoTrib = {};
	$scope.items = [];
	var sum = 1;
	
	$scope.addItem = function (user){
			$scope.items.push({
				nome: user.nome,
				email: user.email,
				soma: sum++
			});
		  user.nome = '';
		  user.email = '';	
	};
      
     
    $scope.addAtributos = function (produto){
        $scope.produtoTrib = produto;
	};
      
   
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="app" ng-controller="controlador">

<form ng-submit="submitForm()">
    <label>Nome: </label><input type="text" name="nome" ng-model="user.nome">
    <label>E-mail: </label><input type="text" name="email" ng-model="user.email">
    
    <input type="text" hidden name="email" ng-model="user.telefone">
    <input type="text" hidden name="email" ng-model="user.cpf">
    
    <input type="button" value="Adicionar" ng-click="addItem(user)" />
</form>
<br />

<div ng-repeat="item in items track by $index">
ID: {{item.soma}}<br />
Nome: {{item.nome}}<br />
E-mail: {{item.email}}<br /><br />
<!-- {{item.telefone}} - {{item.cpf}} -->
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal" ng-click="addAtributos(item)">Atributos</button>
<hr />
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Atributos</h4>
      </div>
      <div class="modal-body">
        <label>Telefone: </label><input type="text" name="telefone" ng-model="produtoTrib.telefone">
        <label>CPF: </label><input type="text" name="cpf" ng-model="produtoTrib.cpf">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Atualizar</button>
      </div>
    </div>

  </div>
</div>

</body>

Assuming the system works with user authentication:

How to store the n items entered by a user x?

Like reexibite the above structure, containing all the items entered by the user x?

javascript html angularjs

  • You will need to make two ajax requests. One when load(returning records) in the controller and another when adding the item(giving insert in the database). Read about Ajax...

  • @Rodrigosartorijarouche could you explain me better by chat? http://chat.stackexchange.com/rooms/52952/room-for-luccasrodrigo-and-rodrigo-sartori-jarouche

  • @luccasrodrigo your question is a little confused. If your system works with user authentication the server will only return the options relating to that logged in user. I see no point in treating it on the client, even because the client operations are not safe

  • Hello @Sorack, I do not wish to treat this in the "customer". The issue is that a certain user can enter several items, which will be registered in the database, and these should only be displayed to the user who entered them.

  • 1

    Then this should be handled on the server. Only you have not provided any server and database information

  • @Sorack, but that’s exactly what I need. What and how I should do to enter this data and return it by reexibiting a list of these...

Show 1 more comment

1 answer

1

var app = angular.module('app', []);
app.controller('controlador', function($scope, $http, $rootScope, itensService) {
    $rootScope.userLogado = {id: 666, nome: 'Malandro'}; //Se tivesse autenticação, teria guardado os dados do usuário em algum lugar
    $scope.user = {};
    $scope.produtoTrib = {};
    $scope.items = [];
    var sum = 1;
    $scope.loadItems = function() {
        itensService.getItemsByidUsuario($rootScope.userLogado.id).then(function(obj) {
            $scope.items = obj.data;
        })
    }
    $scope.addItem = function(user) {
        $scope.items.push({
            idUserLogado: $rootScope.userLogado.id, // identifica o malandro que esta logado na hora do cadastro.
            nome: user.nome,
            email: user.email,
            soma: sum++
        });
        user.nome = '';
        user.email = '';
    };


    $scope.addAtributos = function(produto) {
        $scope.produtoTrib = produto;
    };

});

app.service("itemsService", function($http) {
    this.getItemsByidUsuario = function(idUserLogado) {
        //SELECT * FROM items WHERE idUserLogado = {{idUserLogado}}
        return $http.get("api/getItemsByidUsuario/" + idUserLogado);
    }
});
...
<body ng-app="app" ng-controller="controlador" ng-init="loadItems();">
...

  • Hello @Thiagorobert, but how do I insert the list of items in the BD via Mysql and re-export the same structure from a query?

Browser other questions tagged javascript html angularjs

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