使用Angular，尝试将数组保存到Rails后端

Question

我尝试了几种在网上找到的方法，但没有一种方法可行，而且它们并没有专门针对我遇到的问题。基本上我有一个食谱Rails应用程序，并使用Angular，我必须：
（1）允许用户在表单中添加一个或多个成分和指示，如下所示：http://jsfiddle.net/V4BqE/
（2）将成分和方向保存为Rails数据库中的数组数据类型（我使用postgresql），有点像这样但不使用$ scope：How to create an Array with AngularJS's ng-model

架构：

  create_table "recipes", force: :cascade do |t|
    t.string   "title"
    t.integer  "difficulty"
    t.integer  "time"
    t.integer  "servings"
    t.string   "description"
    t.string   "ingredients",              array: true
    t.string   "directions",               array: true
    t.integer  "category_id"
    t.integer  "author_id"
    t.datetime "created_at",  null: false
    t.datetime "updated_at",  null: false
  end

控制器：

(function() {
    'use strict';

    function NewRecipeController ($location, RecipeService, CategoryService) {
        var vm = this;

        CategoryService.getCategories()
            .then(function(response) {
                vm.categories = response.data;
            });

      vm.addRecipe = function() {
        var data = {
            title: this.title,
            difficulty: this.difficulty,
            time: this.time,
            servings: this.servings,
            description: this.description,
            // Im stuck trying to figure out the following 2 lines
            ingredients: this.ingredients,
            directions: this.directions,
            category_id: this.category.id
        };

        RecipeService.createRecipe(data);
        $location.path('profile');
      };

    }

    angular
        .module('app')
        .controller('NewRecipeController', NewRecipeController)

}());

表格（只是相关的成分和方向部分）：

        <form name="newRecipe" novalidate ng-submit="vm.addRecipe()">

            <!-- title -->

            <div class="form-group">
              <label for="title">Recipe Name</label>
              <input class="form-control" type="text" name="title" ng-model="vm.title" required>
            </div>

            <!-- category -->

            <div class="form-group">
                <label for="category">Category</label>
              <select class="form-control" name="category" ng-model="vm.category" ng-options="category.name for category in vm.categories" required></select>
            </div>

            <!-- description -->

            <div class="form-group">
                <label for="description">Description</label>
              <input class="form-control" type="text" name="description" ng-model="vm.description" required>
            </div>

            <!-- difficulty -->

            <div class="form-group">
              <label for="difficulty">Difficulty</label>
              <input class="form-control" type="number" name="difficulty" ng-model="vm.difficulty" min="1" max="5" required>
              <small id="emailHelp" class="form-text text-muted">Enter a number between 1 and 5.</small>
            </div>

            <!-- time -->

            <div class="form-group">
                <label for="time">Time to Make (Minutes)</label>
              <input class="form-control" type="number" name="time" ng-model="vm.time" min="5" step="5" required>
              <small id="emailHelp" class="form-text text-muted">Enter a number that is an increment of 5 minutes.</small>
            </div>

            <!-- servings -->

            <div class="form-group">
                <label for="servings">Servings</label>
              <input class="form-control" type="number" name="servings" ng-model="vm.servings" required>
            </div>

            <!-- ingredients - this is where I'm stuck -->
            <!-- I want to be able to let the user add more input fields if they want and do the same for directions -->

            <div class="form-group" ng-repeat="ingredient in vm.ingredients">
                <label for="ingredients">Ingredients</label>
              <input class="form-control" type="text" name="ingredients" ng-model="vm.ingredients[$index]" required>
            </div>

            <div ng-show="newRecipe.$valid">
                <input class="btn btn-primary" type="submit" value="Create Recipe">
            </div>
        </form>

我知道我必须将数组保存为字符串。我尝试直接保存ingredients: '["ingredient1", "ingredient2"]'和ingredients: '["ingredient1, ingredient2"]'，但两者都保存为ingredients: ["ingredient1"]。我也试过JSON.stringify(ingredients)。我正在使用序列化器：

class RecipeSerializer < ActiveModel::Serializer
  attributes :id, :title, :difficulty, :time, :servings, :description, :ingredients, :directions

  belongs_to :category
  belongs_to :author, class_name: 'User'
  # has_many :favorites
    has_many :favorited_users, through: :favorites, source: :user
end

Recipe Rails控制器#create：

  def create
    @recipe = Recipe.new(recipe_params)
    @recipe.author = current_user
    @recipe.save
  end

Github上的完整代码：https://github.com/auranbuckles/world-recipes