从mysql和angular中删除数据

时间:2014-11-18 19:33:59

标签: javascript php mysql angularjs

我正在学习angularJs,我想用php和angularJs创建基本的crud应用程序 我坚持删除部分,请帮帮我 这是我的代码:
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());

    }

我哪里错了?

3 个答案:

答案 0 :(得分:0)

您需要将$index传递给delete方法并从data对象

中删除该项目

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);
        })
}    

也不要做

  • 为ng-repeat键使用不同的名称(现在我更改为row而不是data
  • 不要清空属性href =&#34;&#34;因为当你点击这整个页面时可能会刷新(现在我删除了这个)
  • 不要在PHP中使用弃用的语法。使用PDO代替mysql_*

答案 1 :(得分:0)

其他简单的解决方案:

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

从此链接:Angular - $http.delete returns success but doesn't works

php代码也在链接上。

答案 2 :(得分:0)

<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>