从angularjs

时间:2016-02-10 11:00:22

标签: mysql angularjs delete-row

我创建了一个数据库,其中有几个表,如问题,答案等。我创建了一个视图页面并显示数据库中的数据。我也为这个视图创建了一个控制器。我在视图中的每条记录的末尾都给出了一个删除按钮。如何删除此删除按钮上的记录单击

我的观点

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

控制器

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

                }
            };

  }]);

})();

2 个答案:

答案 0 :(得分:0)

为什么你在应用程序中使用php?这看起来对我来说是一件可怕的事情。 angular可以轻松地处理你在那里使用php做的部分......

(见这里:) Should I mix AngularJS with a PHP framework?

关于你的问题: 您必须在服务器上实现DELETE请求,并使用$ http指令在控制器中使用angular调用它。 之后,您可以使用您可能实现的相应GET请求从服务器再次获取数据,如果您正确执行了所有操作,angular将更新视图本身。

但如上所述,这里的主要问题是首先混合angular和php。

答案 1 :(得分:0)

可能会对你有帮助。 传递delete方法中的行的id和make angular ajax post调用服务器以删除该行。

&#13;
&#13;
  (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 

            }
          };

        }
      ]);

    })();
&#13;
&#13;
&#13;