Блог

Я пытаюсь удалить элемент в Angular JS. Когда пользователь нажимает кнопку действия, предполагается, что представление карты должно быть удалено, но оно не удаляется в представлении HTML, а в серверных nodejs и DB данные были удалены. Когда я обновляю, элемент был удален, все, что я хочу, это когда я нажимаю кнопку, из 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

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

Вы не удаляете элемент из $scope.data, который является исходным массивом из вашего ng-repeat.

Я вижу, что вы не используете фильтры в своем ng-repeat, поэтому у вас есть два варианта:

1. Создайте одну функцию, которая получает индекс в качестве параметра и удаляет соответствующий элемент в массиве:

   $scope.remove = функция (индекс) { $scope.data.splice(индекс, 1); }

И по щелчку мыши вы вызываете эту функцию:

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

2. Просто передайте индекс в качестве параметра вашей функции MeterId и удалите элемент из $scope.data там

Будьте осторожны, чтобы передача индекса работала только в том случае, если вы не используете фильтры, если вы используете, то вам нужно передать объект в функцию удаления вместо индекса и использовать indexOf:

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

И вызовите эту функцию, передав элемент в качестве параметра:

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

Не уверен, что понимаю вашу функцию $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