Editing data with Angular and php

Question

Editing data with Angular and php

Navigation

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

1

Does anyone know how to select a data and go to an editing screen, using html, angularJS and php?

Example: I have a list of contacts. I want to make a button that holds the id of that contact and when I click on this button, it takes me to another html page where I can edit the contact data.

I have this:

<a href="editar.html?id={{usuario.id}}" class="btn btn-xs btn-primary">Editar</a>

And it works. I'm directed to the edit.html and with the id in the url:

localhost: 8888 / systems / websystems / Angular_CatalogJS / edit.html? id = 1

On this page I have the following code:

<script type="text/javascript">
angular.module("myCrud", []);

angular.module("myCrud").controller("myCrudCtrl", function ($scope, $http) {

    var carregarUsuario = function () {
        $http.get("php/buscaPEdicao.php", {params: {id: usuario}}).success(function (data){
            console.log(data);
            $scope.usuarios = data;
        });
    };
    carregarUsuario();
   });
   </script>
   </head>
   <body ng-controller="myCrudCtrl">
    <div class="jumbotron">
    <table class="table">
        <tr>
            <td>Nome</td>
            <td>Email</td>
            <td>Password</td>
        </tr>
        <tr ng-repeat="usuario in usuarios">
        <td><input type="text" ng-model="usuario.newName">{{usuario.name}}</td>                       
        <td><input type="text" ng-model="usuario.newEmail">{{usuario.email}}</td>
        <td><input type="text" ng-model="usuario.newPass">{{usuario.pass}}</td>
        </tr>
    </table>
</div>

And my php:

<?php
$id = $_POST['id'];

$usuario = mysqli_query($con, "SELECT * FROM users WHERE id='$id'");

header('Content-Type: application/json');

$return = array();

while ($dados = mysqli_fetch_assoc($usuario)) {
     array_push($return, $dados);
}

echo json_encode($return);
?>

php angularjs

asked by anonymous 27.09.2015 / 03:48

2 answers

Swift - Add Show Password button Use method of another class

score 1 · Answer 1

Here's an example, I believe that's what you're trying to do. Thanks.

angular.module("myCrud", ["ngResource"]);

angular.module("myCrud").controller("myCrudCtrl", function ($scope, $resource) {
   //resUsuario = $resource("/yourUrl");
   $scope.current_user = {};
   $scope.users = [];
   $scope.users.push({id: 1, name: "AAA"});
   $scope.users.push({id: 2, name: "BBB"});
   $scope.users.push({id: 3, name: "CCC"});
  
   $scope.setCurrentUser = function(user) {
     $scope.current_user = user;
     
    // Usando o $resource para chamar uma API
    // resUsuario.get({user_id: user.id}).then(function doSomething(response) {
    //   $scope.current_user = response;
    // });
   };
  
   $scope.save = function(user) {
     alert("Usar '$http' e fazer o seu post do objeto 'current_user'");
     
     // Usando o $resource para chamar uma API
     //resUsuario.save($scope.current_user).then(function doSomething(res){
     //  console.log("salvo com sucesso");
     //});
   };
  
});

<!DOCTYPE html>
<html ng-app="myCrud">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.js"></script>
  
</head>
<body ng-controller="myCrudCtrl">
  <h2>LIST</h2>
  <table>
    <tr>
      <th>ID</th>
      <th>NAME</th>
    </tr>
    <tr ng-repeat="user in users">
      <td ng-bind="user.id"></td>
      <td ng-bind="user.name"></td>
      <td><button type="button" ng-click="setCurrentUser(user)">edit</button></td>
    </tr>
  </table>
  

  <h2>FORM</h2>
  <form ng-submit="save()">
    <div>
      <label>ID</label>
      <input ng-model="current_user.id" disabled></div>
    </div>
    <div>
      <label>NAME</label>
      <input ng-model="current_user.name"></div>
    </div>
    <div>
      <button>salvar</button>
    </div>
  </form> 
</body>
</html>

score 0 · Answer 2

Place your code as follows:

<script type="text/javascript">
angular.module("myCrud", []);

angular.module("myCrud").controller("myCrudCtrl", function ($scope, $http) {

    var carregarUsuario = function () {
        //mudei de 'get' para 'post'
        $http.post("php/buscaPEdicao.php", {id: usuario}).success(function (data){
            console.log(data);
            $scope.usuarios = data;
        });
    };
    carregarUsuario();
   });
   </script>
   </head>
   <body ng-controller="myCrudCtrl">
    <div class="jumbotron">
    <table class="table">
        <tr>
            <td>Nome</td>
            <td>Email</td>
            <td>Password</td>
        </tr>
        <tr ng-repeat="usuario in usuarios">
        <td><input type="text" ng-model="usuario.newName">{{usuario.name}}</td>                       
        <td><input type="text" ng-model="usuario.newEmail">{{usuario.email}}</td>
        <td><input type="text" ng-model="usuario.newPass">{{usuario.pass}}</td>
        </tr>
    </table>
</div>

And in the php code it looks like this

<?php
$post = file_get_contents("php://input");
$json = json_dencode($post);
$id = $json['id'];


$usuario = mysqli_query($con, "SELECT * FROM users WHERE id='$id'");

header('Content-Type: application/json');

$return = array();

while ($dados = mysqli_fetch_assoc($usuario)) {
     array_push($return, $dados);
}

echo json_encode($return);
?>