current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 0 down vote favorite

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 ?

share|improve this question
    
Please, don't use mysql_* functions, They are no longer maintained and are officially deprecated. Learn about prepared statements instead, and use PDO or MySQLi. You will also want to Prevent SQL Injection! – Jay Blanchard Nov 18 '14 at 19:40
    
Ok sure , thx for tips – user3856699 Nov 18 '14 at 19:42
up vote 0 down vote accepted

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_*
share|improve this answer
    
Thx @Asik , but it's not working yet – user3856699 Nov 18 '14 at 19:48
    
what is not working? – Asik Nov 18 '14 at 19:49
    
it just delete it , but after refresh they're still alive – user3856699 Nov 18 '14 at 19:50
    
why did u change data to row ? – user3856699 Nov 18 '14 at 19:52
    
i get this in firebug id = undefined – user3856699 Nov 18 '14 at 19:55
up vote 0 down vote

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.

share|improve this answer
up vote 0 down vote 
<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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.