Angularjs: Deleting row from ng-repeat table with confirmation box

Question

I want to delete a row from ng-repeat table by clicking a delete button. The button works correctly but i want to show a confirmation box after clicking delete button if the user selects yes then only it should delete that particular row otherwise not. anyone have any solution?

        <script>
           var app= angular.module("myapp",[]);
            app.controller("mycontroller",function ($scope, $http)
                //get data from database
                {
                $http.get("getData.php").then(function (response) {
                    $scope.names = response.data.records;});
                            //Remove record
                                    $scope.remove = function(index,xid){

                                  var url = "remove.php?xid="+xid;

                                  $http.get(url).then(function successCallback(response) {

                                   $scope.names.splice(index, 1);

                                   $http.get("getData.php").then(function (response) {
                                        $scope.names = response.data.records;
                                    });
                                  }); 

                });    

               </script>
               <body ng-app ="myapp" ng-controller="mycontroller">

        <table border=1>

                <tr   ng-repeat="x in names  | filter: searchText | orderBy:sortColumn">

                    <td>{{x.Bank}}</td>
                    <td>{{x.cname}}</td>
                    <td >{{x.cfees}}</td>
                    <td>{{x.fpaid }}</td>
                    <td ng-model="bfess">{{x.cfees-x.fpaid}}</td>
                    <td>{{x.sdate | date:'dd-MM-yyyy'}}</td>
                    <td>{{x.edate | date:'dd-MM-yyyy'}}</td>
                    <td>{{calDate(x.edate,x.sdate)}}</td>
                    <td>{{calDate(x.edate,getToday()| date:'dd-MM-yyyy')}}</td>     
                    <td><button type="button" class="btn btn-danger"  ng-click="remove($index,x.id);" value="Delete">Delete</button></td>
            </tr>
            <tr>
                <td>Total fess paid by students: {{ calcTotal(names) }}</td>
            </tr>

        </table>

You can use Bootstrap modal for it. Example [here](https://stackoverflow.com/a/29602528/6744399) — pavelety, Dec 10 '17 at 21:19

Jonas · Answer 1 · 2017-12-10T19:01:59.477

0

You can use javascript's confirm function. Read: https://www.w3schools.com/jsref/met_win_confirm.asp

To use it you would add a confirmation step before making the delete http request:

$scope.remove = function(index,xid){
     var url = "remove.php?xid="+xid;
     if(confirm("Do you really want to delete entry " + xid + "?\nConfirm with ok.")){
         $http.get(url).then(function successCallback(response) {
              $scope.names.splice(index, 1);
              $http.get("getData.php").then(function (response) {
                  $scope.names = response.data.records;
              });
          });
     }
}

The confirm dialog returns true if the user presses 'ok' in the shown dialog box. If he presses 'cancel' the function returns false and in this case, nothing will happen.

Edit: added another ")" after the if statement.

edited Dec 10 '17 at 19:01

answered Dec 10 '17 at 18:48

Jonas

829
7
18

@ManishaChavan yes, I am sorry. I missed the second parent ")" after the if statement. See the edited answer. – Jonas Dec 10 '17 at 19:02
@ManishaChavan I used your code locally and it had tons of parsing errors in my browser's console. Please make sure this is not the case in your version. Open the console via Right Click -> Inspect (this is the case for most browsers). – Jonas Dec 10 '17 at 19:10
I checked there are no such errors. i am fetching all the data from MySQL by PHP may be thats why you are getting such errors – Manisha Chavan Dec 10 '17 at 19:13

Angularjs: Deleting row from ng-repeat table with confirmation box

1 Answers1