angularjs delete through php

Question

angularjs delete through php

i am trying to implement delete functionality in angularjs using php as follows: delete: index.html view:

<ul>
            <li ng-repeat="r in result">
            {{r.description}}|{{r.name}} | <a href='' ng-click = "edit(r.product_id)">edit</a> | <a href='' ng-click = "delete(r.product_id)">delete</a>
            <input type="hidden" name="hdnid" ng-model="hdn" value="{{r.product_id}}"/>
            </li>
        </ul>

in controller: delete:

//delete
        $scope.delete = function() {
            var elem = angular.element($element);
            var dt = $(elem).serialize();
            //alert($element);
            console.log($(elem).serialize());
            $http({
                method: 'POST',
                url: 'php/delete.php',
                data: dt,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.rs = data; // Show result from server in our <pre></pre> element
            }).error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;
            });
        };

and in php file: delete.php

    <?php
include 'connect.php';
mysql_select_db($database,$con);  
$id = $_POST['hdnid'];
$query = "delete from `product` where `product_id` = $id";
$result = mysql_query($query) OR die(mysql_error()); 
echo "You have successfully deleted ";
?>

The record gets deleted but the page is not refreshed. I cant see the record deleted until i refresh the page. Where am i going wrong? how do i refresh the page?

php
delete
angularjs
page-refresh

Answer 1

You need to delete it from your scope for it to show up. We don't need to pass the element Id to the scope to get it to work when we click we can capture it with the this keyword

 $scope.delete = function() {
        //Store the this variable so we can use it in the $http functions
        var that = this
        var elem = angular.element($element);
        var dt = $(elem).serialize();
        //alert($element);
        console.log($(elem).serialize());
        $http({
            method: 'POST',
            url: 'php/delete.php',
            data: dt,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).success(function(data, status) {
            // get the elements index and then remove it from the results array

            $scope.result.splice(that.$index, 1);
            $scope.status = status;
            $scope.data = data;
            $scope.rs = data; // Show result from server in our <pre></pre> element
        }).error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
    };