将 Django 表单元素绑定到 AngularJS ng-model答案

【问题标题】：Binding Django Form Element to AngularJS ng-model将 Django 表单元素绑定到 AngularJS ng-model
【发布时间】：2013-11-07 11:04:24
【问题描述】：

通常，当我使用 Django 的 Form API 显示模型表单时，我会通过 django.template.Context 将 form 对象传递给模板，并使用 Django 的模板语言呈现其字段：

<form role="form" method="post">
    {% csrf_token %}           
    {{ form.non_field_errors }}
    <div class="form-group">
        <label for="id_content">Content</label>
        {{ form.content }}
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

form.content 将呈现为

<textarea id="id_content" rows="10" cols="40" name="content" style="margin: 2px; width: 339px; height: 164px;"></textarea>

但现在我想将它与AngularJS 一起使用，即将输入字段绑定到 ng-model

<textarea ng-model="content" id="id_content" rows="10" cols="40" name="content" style="margin: 2px; width: 339px; height: 164px;"></textarea>

有没有办法做到这一点？

【问题讨论】：

标签： django angularjs

【解决方案1】：

一种方法是覆盖表单初始化方法并更新小部件属性：

class MyForm(forms.ModelForm):
    # fields..

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['content'].widget.attrs.update({'ng-model': 'content'})

【讨论】：

谢谢。但我已经选择了自定义过滤器。我稍后会发布我的代码供您查看。使用过滤器，无需每次都覆盖表单初始化。
@LimH。当然，可能还有其他几种方法可以做到这一点，另一种方法是使用 django-angular 中的this mixin。