使用 AngularJS 和 Express 将复杂的表单数据发布到 RESTful API

Question

我会尽快回答这个问题，但它非常复杂。我有一个 api，我正试图将其 POST 嵌套数据，但我无法弄清楚如何正确构建数据来做到这一点。

所以我构建了一个 API 用于调查制作应用程序。一般结构是 User --> Quiz --> Question --> QuestionChoice，每个 --> 代表一对多关系。

API 的所有模型看起来都很相似，所以我不会在这里 post 它们，但这里有一个例子。我使用 SailsJS 和 Waterline ORM 构建了 API。我已经用浏览器的直接请求对此进行了测试，并且 API 和数据库目前工作正常，所以我的问题在前端。

module.exports = {

    attributes: {

        title: {
            type: 'string',
            required: true
        },

        is_active: {
            type: 'boolean',
            defaultsTo: 'false'
        },

        quiz: {
            model: 'quiz',
            required: true
        },

        choices: {
            collection: 'questionchoice',
            via: 'question'
        }

    }
};

好的，所以在前端，我有一个复杂的嵌套表单，用户可以在其中构建测验数据。这是它的缩写版本：

form(name='newQuiz' ng-submit='createNewQuiz()')
    input.quiz-name(type='text', name='name', class='form-control' ng-model='quiz.name' placeholder='SURVEY NAME')
    .col-lg-6.col-md-6.col-sm-6.col-xs-12.question-column
        input.question-input(placeholder='QUESTION ONE', type='text', name='question', class='form-control', ng-model="quiz.q1.question")
    .col-lg-6.col-md-6.col-sm-6.col-xs-12.answer-column
        input.answer-input(placeholder='ANSWER CHOICE A', type='text', name='answer', class='form-control', ng-model="quiz.q1.answers.a")
        input.answer-input(placeholder='ANSWER CHOICE B', type='text', name='answer', class='form-control' ng-model="quiz.q1.answers.b")
        input.answer-input(placeholder='ANSWER CHOICE C', type='text', name='answer', class='form-control' ng-model="quiz.q1.answers.c")
        input.answer-input(placeholder='ANSWER CHOICE D', type='text', name='answer', class='form-control' ng-model="quiz.q1.answers.d")
    .col-lg-6.col-md-6.col-sm-6.col-xs-12.question-column
        input.question-input(placeholder='QUESTION ONE', type='text', name='question', class='form-control', ng-model="quiz.q2.question")
    .col-lg-6.col-md-6.col-sm-6.col-xs-12.answer-column
        input.answer-input(placeholder='ANSWER CHOICE A', type='text', name='answer', class='form-control', ng-model="quiz.q2.answers.a")
        input.answer-input(placeholder='ANSWER CHOICE B', type='text', name='answer', class='form-control' ng-model="quiz.q2.answers.b")
        input.answer-input(placeholder='ANSWER CHOICE C', type='text', name='answer', class='form-control' ng-model="quiz.q2.answers.c")
        input.answer-input(placeholder='ANSWER CHOICE D', type='text', name='answer', class='form-control' ng-model="quiz.q2.answers.d")
    .button-row
        input.btn.btn-primary.launch-button(type='submit', value='Save Quiz', class='btn btn-primary')
        input.btn.btn-primary.launch-button(class='btn btn-primary' value='Go Live!')

现在，这是我有点不清楚的地方。在提交表单时运行的 createNewQuiz 函数。所以我的问题是，我如何在此处构建数据以便我的 API 接受它。到目前为止，我尝试过的任何事情似乎都没有用。

$scope.createNewQuiz = function() {
    console.log($scope.currentUser)
    console.log($scope.quiz)
    var newQuiz = {
        user: $scope.currentUser,
        name: $scope.quizName,
        questions: //No idea what to put here
        }

    $http.post('http://localhost:1337/quiz/create', newQuiz)
        .success(function (data, status, headers) {
            alert('new quiz created');
        }).error(function (data, status, headers) {
            alert('error creating new quiz')
            console.log(data, status, headers)
        })
    }
}

Answer 1

您的模型嵌套很深User --> Quiz --> Question --> QuestionChoice，默认情况下 Waterline 无法处理。您应该通过在创建 and/or 更新操作时修改默认蓝图 API 来处理它。

您可以通过 Angular
您必须自行覆盖默认蓝图创建 and/or 更新（如果用户可以更新）以满足您的需要。

使用 AngularJS 和 Express 将复杂的表单数据发布到 RESTful API

Posting complex form data to a RESTful API with AngularJS and Express

express

angularjs

sails.js

waterline