Question

我正在尝试删除Angular JS中的元素。当用户单击操作按钮时，卡视图将被删除，但它不会在HTML视图中删除，而是在后端nodejs＆amp;数据库数据已被删除。当我刷新元素已被删除所有我想要的是当我点击按钮从HTML，卡视图必须删除，也在数据库？请帮我解决这个问题？

HTML视图

<md-card ng-repeat="user in data"  class="color"   ng-style="user.changeColor"> 
    <md-card-title>
        <md-card-title-text style="">
            <span class="md-headline">Name:{{user.name}}</span>
            <span class="md-headline">Mobile:{{user.mobile_no}}</span>
        </md-card-title-text>
    </md-card-title>

    <md-input-container>
      <label>Meter ID</label>
      <input ng-model="meter" required md-maxlength="10" type="text" >
    </md-input-container>

    <md-button class="color1" ng-click="meterID(user,meter)" >
            Action
    </md-button>
</md-card>

Angular JS Code

.controller('userCtrl',function($scope,$rootScope,$http){
    $scope.test="Hello Raam"
    $scope.meter;

    $http.get('http://localhost:8888/json').success(function(response){
        $scope.data=response;
        console.log($scope.data)
    })

    $scope.meterID=function(user,meter,x){
        console.log("User",user);       
        console.log("Meter",meter)

        user.changeColor={
            "background-color":"green",         
        }
        console.log(user.name);

        $scope.userMeter={          
            name:user.name,
            mobile:user.mobile_no,
            appartment:user.appartment,
            street:user.street,
            city:user.city,
            pincode:user.pincode,
            meterID:meter
        }

        console.log("UserMeter",$scope.userMeter);


            $http.post('http://localhost:8888/meterID',$scope.userMeter).success(function(response){
                console.log("value has been successfully updated");
                $scope.data1=response;
                console.log("$scope.data1",$scope.data1)
            })

            $http({
                method: 'DELETE',
                url: 'http://localhost:8888/deleteRegisterUser',
                data: user,
                headers: {'Content-Type': 'application/json;charset=utf-8'}
            }).success(function (data, statusText ){
                    console.log("value has been successfully Deleted",data );

                })
            }
})

的NodeJS：

app.delete('/deleteRegisterUser', function(req,res){
            var mob=req.body.mobile_no;
                console.log("deleteRegisterUser : ",mob)
                // res.send(data)
            con.query("DELETE from water_register WHERE mobile_no = ?",mob,function (err,rows){
                if(err) throw err;
                console.log("Value has been deleted")
                // res.send(rows);
                 res.redirect('/dashboard');
            })  
    })

Answer 1

您没有从$ scope.data中删除该元素，即来自ng-repeat的源数组。

我发现您没有在ng-repeat上使用过滤器，因此您有两种选择：

创建一个接收索引作为参数的函数，并删除数组中的对应项：

$ scope.remove = function（index）{ $ scope.data.splice（index，1）; }

然后点击调用该功能：

<md-button class="color1" ng-click="meterID(user,meter); remove($index)" >

只需将索引作为参数传递给meterID函数，然后从$ scope.data中删除该项

请注意，只有在不使用过滤器的情况下传递索引才有效，如果您必须将对象传递给remove函数而不是索引并使用indexOf：

$scope.remove = function (item) {
    $scope.data.splice($scope.data.indexOf(item), 1);
}

并调用此函数将项目作为参数传递：

 <md-button class="color1" ng-click="meterID(user,meter); remove(user)" >

Answer 2

不确定我理解您的功能$scope.meterID

您在同一个功能中调用更新和删除。无论如何，从$scope.data删除项目后，进行另一次“http get”调用以从后端获取更新的记录列表

//after $http.post ( method: DELETE ) ....

$http.get('http://localhost:8888/json').success(function(response){
    $scope.data=response;
    console.log($scope.data)
})

此外，在http.post方法中，您将在$ scope.data1中发布值。什么是data1以及你在哪里使用它？我认为应该是

$scope.data=response;
console.log("$scope.data ",$scope.data)enter code here

如何从角度js中的Json对象中删除数据？

2 个答案: