delete a row from table in angularjs

Question

I have created a database which has several tables such as questions,answers etc. And I have created a view page and display the data from database. Also I have created a controller for this view. I have given a delete button at the end of every record in my view. How can I delete a record on this delete button click

My view

<div class="container" ng-controller="questionEditCtrl">

    <form class="form-horizontal" role="form" name='quizEdit' ng-submit="submit(data)">
    <div class="table-responsive">          
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Questions</th>
                    <th>Answer 1</th>
                    <th>Answer 2</th>
                    <th>Answer 3</th>
                    <th>Answer 4</th>
                    <th>Answer 5</th>
                    <th>Correct Answer</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <?php
                foreach ($quizes as $q) {
                    ?>
                    <tr>
                        <td ng-model="data.quesID"><?php echo $q['question_id']; ?></td>
                        <td ng-model="data.ques"><?php echo $q['question']; ?></td>
                        <td ng-model="data.ans0"><?php
                            if (isset($q['answers'][0])) {
                                echo $q['answers'][0];
                            }
                            ?></td>
                        <td ng-model="data.ans1"><?php
                            if (isset($q['answers'][1])) {
                                echo $q['answers'][1];
                            }
                            ?></td>
                        <td ng-model="data.ans2"><?php
                            if (isset($q['answers'][2])) {
                                echo $q['answers'][2];
                            }
                            ?></td>
                        <td ng-model="data.ans3"><?php
                            if (isset($q['answers'][3])) {
                                echo $q['answers'][3];
                            }
                            ?></td>
                        <td ng-model="data.ans4"><?php
                    if (isset($q['answers'][4])) {
                        echo $q['answers'][4];
                    }
                    ?></td>
                        <td ng-model="data.corr_ans"><?php
                    if (isset($q['correctAnswer'])) {
                        echo $q['correctAnswer'];
                    }
                    ?></td>
                        <td><a href="">Edit</a> / <a href="" ng-click="delete()">Delete</a></td>

                    </tr>
    <?php
}
?>
            </tbody>
        </table>
    </div>
    </form>
</div>

controller

;
(function () {
    'use strict';

    angular.module('app', []).controller('questionEditCtrl', ['$scope', '$timeout', '$http', function ($scope, $timeout, $http) {


            $scope.delete = function () {
                if (confirm("Are you sure you want to delete this record?")) {


                    // todo code for deletion

                }
            };

  }]);

})();

http://stackoverflow.com/questions/27002494/delete-data-from-mysql-and-angular — dendimiiii, Feb 10 '16 at 11:04

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

why are you using php in your application ? this looks like a horrible thing to do to me. angular can handle the part you did there with php on its own with ease...

(see here:) Should I mix AngularJS with a PHP framework?

regarding your question: you have to implement a DELETE request on your server and call it with angular in your controller using the $http directive. after that you could fetch the data again from the server with the corresponding GET request you probably implemented and angular will update the view itself if you did everything correctly.

but as mentioned the major issue here is mixing angular and php in the first place.

edited May 23 '17 at 12:15

Community

1
1

answered Feb 10 '16 at 11:08

Patrick Kelleter

2,631
1
13
19

Can you show me how to write this view completely using angularjs? and without using php.. I cant get ng-repeat to work – CraZyDroiD Feb 10 '16 at 11:52
sorry but i don't think so is the place to do something like that. you probably should take a deep look to some basic angularjs tutorials first. the idea is: 1)get the data via $http from your server 2)put it to some variable on your controller 3)visualize it via ng-repeat in your view. that said you should be prepared enough to work yourself through some tutorials i think. – Patrick Kelleter Feb 10 '16 at 12:14

score 0 · Answer 2 · answered Feb 10 '16 at 11:34

may be this will help you. pass the id of the row in delete method and the make angular ajax post call to server to delete the row.

  (function() {
      'use strict';

      angular.module('app', []).controller('questionEditCtrl', ['$scope', '$timeout', '$http',
        function($scope, $timeout, $http) {


          $scope.delete = function(data) {
            if (confirm("Are you sure you want to delete this record?")) {


              // todo code for deletion
              // in data variable you will get id of the row and using that id
              // you can make a server call to delete the data using post method you need to modify your delete method i.e make it which accept data as a aurgument or you can passs id of the row is to deleted from talbe 

            }
          };

        }
      ]);

    })();

delete a row from table in angularjs

2 Answers2