javascript - 使用 angularjs 在一个请求中发布迭代数据

Question

我目前正在开发一个简单的考试应用程序，使用 Angular 作为我的前端，我遇到了这个问题，这个问题困扰了我两天，我的问题是如何发出一个请求(POST)来发布您的数据在我看来，来自迭代数据(在我的例子中是 Question.id 和 tempanswer(ng-repeat 指令))，我知道如何发布单个请求，但不知道如何发布请求 - ^_^。

看看我的代码片段..

后端。

public function submitExam() {

    $student_id = $this->request->student_id;
    $subject = Subject::find($this->request->subject_id);

    //$question_count = Question::where('subject_slug', $subject->slug)->count();

    $tempAnswers = json_decode($this->request->answers);
    //dd($this->request->answers);
    foreach ($tempAnswers as $tempQuestionKey => $tempAnswer) {

        Tempanswer::insert([
            'question_id' => $tempQuestionKey,
            'temp_answer' => $tempAnswer,
            'student_id'  => $student_id,
            'subject_id'  => $subject->id
            ]);

        Examinationresult::insert([
            'question_id' => $tempQuestionKey,
            'subject_id'  => $subject->id,
            'student_id'  => $student_id
            ]);
    }

Angular(前端)。

$scope.mobileSubmitExam = function() {
        var result = $window.confirm('Are you sure to submit?');
        //var tempAnswer = {$scope.examDetail[0].id: $scope.answers};
        var submitInfo = {
            'answers': $scope.answers;
            'student_id': $scope.studentDetail.id,
            'subject_slug': $scope.subject_slug,
            'subject_id': subject_id
        };

        if(result == true) {

            $http.post(BASE_URL + 'mobile/examination/submit', submitInfo)
                .success(function(response) {
                    console.log(response);
                })
                .error(function() {
                    $window.confirm('Error on submitting the examination!');
                })
        }
    };

查看(Html)。

<div ng-show="!examKey" class="row">
    <div class="col s12">
        <div class="card card grey darken-3">
            <div class="card-content white-text">
                <div>
                    <header>
                        <small>
                            <strong>
                                <p>Student: <span class="white-text">@{{studentDetail.firstname}}&nbsp;&nbsp;@{{studentDetail.middlename[0]}}.&nbsp;&nbsp;@{{studentDetail.lastname}}</span></p>
                                <p>Subject: <span class="white-text">@{{subject_slug}}</span></p>
                                <hr>
                            </strong>
                        </small>
                    </header>
                </div>
                <br>
                <div ng-repeat="detail in examDetail">
                    <header ng-bind="detail.title"></header>
                    <br>
                    <p>@{{detail.question}}</p>
                    <p>@{{detail.choice_a}}&nbsp;&nbsp;&nbsp;@{{detail.choice_b}}&nbsp;&nbsp;&nbsp;@{{detail.choice_c}}&nbsp;&nbsp;&nbsp;@{{detail.choice_d}}</p>
                    <div class="input-field s6">
                        <label for="answers">Answer</label>
                        <input type="text" name="answers" id="answers" ng-model="answers" class="validate">
                    </div>
                </div>
                <hr>
            </div>
            <div class="card-action">
                <button type="submit" class="btn btn-primary btn-xs" ng-click="mobileSubmitExam()">Submit</button>
            </div>
        </div>
    </div>
</div>

我已经在 POSTMAN 中测试了我的 api 并且它可以工作(使用下面的格式)。

answers = {"1": "testing", "2": "testing2"}
student_id = some id
subject_slug = some-subject
subject_id = some id

但我实际上使用了它，我的后端特别是 tempAnswer 为空。我认为错误在于我的 Angular ，是否有人可以提供一些更好的想法或解决方案^_^。希望你们的回复，我对 Angular 完全陌生，但我正在急切地学习它。

Answer 1

我已经在我的应用程序上调试了这个错误。如果有人有同样的问题也许它会有所帮助，我有几个更改 View 和模型( Angular 侧)在这里。

在 Angular 方面，我创建了空对象，它将作为答案的容器以及每个问题的 ID。

$cope.answers={}; // declare globally.

$scope.mobileSubmitExam = function() {

        var result = $window.confirm('Are you sure to submit?');
        var submitInfo = {
            'answers': JSON.stringify($scope.answers),
            'student_id': $scope.studentDetail.id,
            'subject_slug': $scope.subject_slug,
            'subject_id': subject_id
        };
        console.log(submitInfo);
        if(result == true) {

            $http.post(BASE_URL + 'mobile/examination/submit', submitInfo)
                .success(function(response) {
                    $scope.answers = '';
                    console.log(response);
                })
                .error(function() {
                    $window.confirm('Error on submitting the examination!');
                })
        }
    };

并在 View 中。

<input type="text" name="answers" id="answers" ng-model="answers[detail.id]" class="validate"> // after.

<input type="text" name="answers" id="answers" ng-model="answers" class="validate"> // before.

就是这样..感谢您的所有评论和 react ，我真的非常感激..