WTForms добавляет дополнительные категории в SelectField

Привет, Майкл, я знаю, что это с опозданием на 3 месяца, но недавно я сделал что-то подобное с помощью AngularJS и модалов начальной загрузки, поэтому я решил опубликовать это для полноты картины:

Это очень упрощенная версия. Я не включил проверку ошибок или проверку любых видов, которые вы, конечно, хотите сделать для своей производственной среды.

В моем шаблоне поле выбора выглядит следующим образом. Вместо первого варианта, позволяющего человеку создать что-то, я просто добавил ссылку рядом с полем выбора, которая позволяет человеку добавить новую категорию. Сама ссылка открывает модальную форму.

Ниже приведено поле выбора:

<div class="form-group">
        {{ form.maincategory.label(class="col-sm-2 control-label") }}
        <div class="col-sm-5">
        {{ form.maincategory(**{'ng-model':'maincategory',
                                'ng-options':'c.id as c.displayname for c in allmaincategories',
                                'class':'form-control'}) }} 
        #over here is the link that opens the form in a modal window
        </div><a data-toggle="modal" href="#newcategory">Add a new category</a>
    </div>

Когда пользователь нажимает на ссылку добавления новой категории, загружается следующее модальное окно:

<!-- Add new category Modal -->
<div class="modal fade" id="newcategory" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Create new main category</h4>
      </div>
      <div class="modal-body">
        <form method="post" ng-submit="createCategory()">
            <div class="form-group">
                {{ categoryform.displayname.label(class="col-sm-8 control-label") }}
                <div>
                    {{ categoryform.displayname(**{'ng-model':'maincat.displayname','class':'form-control'}) }}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input type="submit" class="btn btn-primary" value="Save changes" />
            </div>
        </form>
      </div>
    </div>
  </div>
</div>

Класс формы WTFORM, который отображает приведенную выше форму в модальном окне, выглядит следующим образом:

class DirectoryMainCategoryForm(Form):
    displayname = TextField('Category name as it appears', validators=[DataRequired(message=(u'This category name is how it appears in the menu'))])

#the following is the form main form where the select appears
class MainEntry(Form):
    maincategory = QuerySelectField('Main category', validators = DataRequired(message=(u'Please select a category for this place'))], get_label='category',
    allow_blank=False, query_factory=Maincategory.query.all,blank_text =('-- Select a main category --'))


#And of course the javascript magic that glues it all together:
function DirectoryController($scope, $http){
    #Adds a new category to the select menu
    $scope.createCategory = function() {
        var categorydata = angular.toJson($scope.maincat);
        $http.post('/create/new/category', categorydata).success(function(data) {
            $scope.allmaincategories = data.category;
        });
    }
}