Delete data from mysql and angular

Question

I'm learning angularJs and i want to create basic crud app with php and angularJs .
i stuck in delete section , please help me .
here is my code :
HTML

<ul>
    <li ng-repeat="data in data">
        {{data.ID}}
        {{data.subject}}
        {{data.body}}
        <a ng-click="delete(data.id)" href="">Delete</a>
    </li>
</ul>

JS

$scope.delete = function(){
    var id = $scope.data.id;
        that = this;
    $http.get("delete.php?id=" + id)
        .success(function(data){
            $scope.data.splice(that.$index, 1);
        })
}

Php

 include('config.php');
    mysql_select_db('ngdb');
    $id = $_GET ['id'];
    $sql = "SELECT * FROM story";
    $records = mysql_query($sql);

    if(isset($_GET ['id'])){
        $id = $_GET ['id'];
        $delete = "DELETE FROM story WHERE id= '$id'";
        $res = mysql_query($delete) or die ("FAILED" .mysql_error());

    }

where am i wrong ?

Please, [don't use `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php), They are no longer maintained and are [officially deprecated](https://wiki.php.net/rfc/mysql_deprecation). Learn about [prepared statements](http://en.wikipedia.org/wiki/Prepared_statement) instead, and use [PDO](http://us1.php.net/pdo) or [MySQLi](http://us1.php.net/mysqli). You will also want to [Prevent SQL Injection!](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) — Jay Blanchard, Nov 18 '14 at 19:40

Asik · Accepted Answer · 2014-11-18T19:51:55.457

0

You need to pass the $index to the delete method and remove that item from data object

HTML

<ul>
    <li ng-repeat="row in data">
        {{row.ID}}
        {{row.subject}}
        {{row.body}}
        <a ng-click="delete(row.ID, $index)">Delete</a>
    </li>
</ul>

JS

$scope.delete = function(deletingId, index){

    $http.get("delete.php?id=" + deletingId)
        .success(function(data){
            $scope.data.splice(index, 1);
        })
}

Also Don't do's

Use different name for ng-repeat key (Now I changed to row instead of data)
Don't empty the attribute href="" becase when you click this entire page may refresh (Now I removed this)
Don't use deprecated syntax in PHP. Use PDO istead of mysql_*

edited Nov 18 '14 at 19:51

answered Nov 18 '14 at 19:43

Asik

7,967
4
28
34

it just delete it , but after refresh they're still alive – Nov 18 '14 at 19:50
why did u change data to row ? – Nov 18 '14 at 19:52
i get this in firebug id = undefined – Nov 18 '14 at 19:55
Setting data from database ? its really deleted in your DB? pls check it. – Asik Nov 18 '14 at 19:55
yes, please change the argument row.ID instead of row.id (I did mistake in my code) – Asik Nov 18 '14 at 19:56
yeah i check this , data didn't delete – Nov 18 '14 at 19:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/65172/discussion-between-asik-and-user3642164). – Asik Nov 18 '14 at 19:56
Hi @Asik, I have the same problem to delete data and I have tried to do what you suggested but doesn't work for me. Look me php code: $user = 'root'; $password = 'root'; $db = 'angularDB'; $host = 'localhost'; $con = mysqli_connect("localhost", $user, $password, $db); // Check connection if (mysqli_connect_errno()){ echo "Failed to connect to MySQL: " . mysqli_connect_error(); } $postdata = file_get_contents("php://input"); $request = json_decode($postdata); $id = $request->id; $del = mysqli_query($con, "DELETE FROM users WHERE id='$id'"); – GustavoSevero Sep 25 '15 at 22:17

score 0 · Answer 2 · edited May 23 '17 at 10:27

0

Other simple solution:

$scope.deleteUser = function (user) {
    $http.delete("php/delete.php", {params: {id: user}}).success(function (data, status){
    });
};

From this link: Angular - $http.delete returns success but doesn't works

The php code is on link too.

edited May 23 '17 at 10:27

Community

1
1

answered Sep 25 '15 at 23:00

GustavoSevero

141
1
9

score 0 · Answer 3 · answered Oct 23 '15 at 10:33

<html>
<head>
</head>
<div class="container" style="margin:0px 100px 0px 500px;">
<div ng-app="myApp" ng-controller="customersCtrl"> 

<fieldset style="width:300px;">
    <legend>Add Doctor</legend>
<form name="addcustomer" method="POST">
        Doctor Name:<input type="text" ng-model="names1.Name" name="Name"/>
        <br/>
        Dept:<input type="text" ng-model="names1.Dept" name="Dept"/>
        <br/>
        <input type="hidden" ng-model="names1.Id" name="Id"/>
        <br/>
        <button data-ng-click="addNewFriend()" name="add" ng-show="add">Add Doctor</button>
        <button data-ng-click="update(names1.Id,names1.Name,names1.Dept)" name="update" ng-show="update">Update Doctor</button>
</form>
</fieldset>
<br/><br/>
<table border='1'>
  <th>Id</th><th>Name</th><th>Dept</th><th>Action</th>
  <tr ng-repeat="x in names">
<td>{{ x.Id }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Dept }}</td>
<td><a  href="#" ng-click="edit(x.Id, $index)">Edit</a>/<a ng-click="delete(x.Id, $index)" href="#">Delete</a></td>
  </tr>
</table>

</div> 
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
<script>
var uid = 1;
var app = angular.module('myApp', []);
   app.controller('customersCtrl', function($scope, $http) {

$scope.add=true;
$scope.update=true;

$http.get("getdata.php")
.success(function (response) {$scope.names = response.records;});

//$scope.names1 = { Id:'',Name:'', Dept:''};

$scope.addNewFriend = function(add){
    var data = {
        Id:uid++,
        Name:$scope.names1.Name,
        Dept:$scope.names1.Dept
    }
    $http.post("insert.php",data).success(function(data, status, headers, config){
        console.log(data);
        alert("inserted Successfully");
    });
    $scope.names.push(data);

};


$scope.delete = function(deletingId, index){

$http.get("delete.php?id=" + deletingId)
    .success(function(data){
        $scope.names.splice(index, 1);
    })
    }

$scope.update = function(updateid,name,dept){
$http.get("update.php?id=" + updateid +"&name="+name+"&dept="+dept)
    .success(function(data){
               alert("updated successfully");
                location.reload(); 
        })
}

$scope.edit = function(id,index) {
//search contact with given id and update it
                    $scope.add=false;
                    $scope.names1 = angular.copy($scope.names[index]);
    }

    } 

    );


</script>

</html>

Delete data from mysql and angular

3 Answers3

Linked